tailwindcss-vite-skilld

name	tailwindcss-vite-skilld
description	A utility-first CSS framework for rapidly building custom user interfaces. ALWAYS use when writing code importing "@tailwindcss/vite". Consult for debugging, best practices, or modifying @tailwindcss/vite, tailwindcss/vite, tailwindcss vite, tailwindcss.
metadata	{"version":"4.3.1","generated_by":"cached","generated_at":"2026-06-28T00:00:00.000Z"}

tailwindlabs/tailwindcss @tailwindcss/vite@4.3.1

Tags: internal: 0.0.0-internal.b2586d4e, next: 4.0.0, latest: 4.3.1

References: package.json • README • Docs • Issues • Discussions • Releases

Search

Use skilld search "query" -p @tailwindcss/vite instead of grepping .skilld/ directories. Run skilld search --guide -p @tailwindcss/vite for full syntax, filters, and operators.

API Changes

This section documents version-specific API changes — prioritise recent major/minor releases.

Module Resolution Changes

• BREAKING: @plugin now resolves package JavaScript entries instead of browser CSS entries when using @tailwindcss/vite — previously resolved to browser entry points, causing import errors in Vite environments source

• BREAKING: Relative @import and @plugin paths now resolve correctly when using @tailwindcss/vite — relative imports were previously resolved from the wrong directory, breaking file references source

New Utility Families (v4.3.0)

• NEW: @container-size utility — CSS container-size shorthand utility for defining container query sizing source

• NEW: Scrollbar utilities — scrollbar-{auto,thin,none} for scrollbar-width, scrollbar-thumb-* and scrollbar-track-* for scrollbar-color styling, plus scrollbar-gutter-* utilities source

• NEW: zoom-* utilities — CSS zoom property utilities for scaling elements source

• NEW: tab-* utilities — CSS tab-size property utilities for controlling tab character width source

Variant Enhancements (v4.3.0)

• NEW: @variant supports stacked variants — can now define compound stacked variants like @variant hover:focus { … } for combining pseudo-classes source

• NEW: @variant supports compound variants — can define multiple variants in one block with comma syntax like @variant hover, focus { … } source

Functional Utility Definitions (v4.3.0)

• NEW: --default(…) support in --value(…) and --modifier(…) — functional @utility definitions can now specify default values using --default() syntax source

• NEW: PluginWithConfig type exported from tailwindcss/plugin — fixes TypeScript errors when inferring plugin config types in type-safe plugin definitions source

Logical Property Utilities (v4.2.0)

• NEW: Logical padding utilities — pbs-* (padding-block-start) and pbe-* (padding-block-end) for logical directional padding source

• NEW: Logical margin utilities — mbs-* (margin-block-start) and mbe-* (margin-block-end), plus scroll variants scroll-pbs-*, scroll-pbe-*, scroll-mbs-*, scroll-mbe-* source

• NEW: Logical border utilities — border-bs-* (border-block-start) and border-be-* (border-block-end) for block-axis borders source

• NEW: Logical size utilities — inline-*, min-inline-*, max-inline-* for inline-size property, and block-*, min-block-*, max-block-* for block-size source

• NEW: Logical inset utilities — inset-s-* (inset-inline-start), inset-e-* (inset-inline-end), inset-bs-* (inset-block-start), inset-be-* (inset-block-end) source

Other New Utilities

• NEW: font-features-* utility — font-feature-settings property utility for controlling OpenType features source

Deprecations

• DEPRECATED: start-* and end-* utilities — use inset-s-* and inset-e-* logical property utilities instead (v4.2.0 and later) source

Also changed: Spacing utility generation optimised for smaller CSS (v4.3.1, #20196)

Best Practices

• Initialize a git repository in your project root — Tailwind uses .gitignore rules internally for automatic source detection, and absence of a git boundary can cause files to be ignored source

• Use only static class names; never concatenate or interpolate strings to build utility classes — dynamic class names are not detected during scanning source

• Control Lightning CSS optimisation explicitly via the optimize option: set to false for development, or { minify: false } to keep optimisation enabled but skip minification source

• Ensure CSS files containing @variant are included in your @source declarations — they are processed by @tailwindcss/vite and require explicit file inclusion source

• Use correct @import and @plugin path resolution with Vite — relative paths resolve from the directory where the @import or @plugin statement appears, and Vite aliases (e.g. @/path) are resolved when configured in vite.config.ts source

• Declare @source directories that must be scanned even if they're ignored by git — prefix with @source "path" without negation to ensure those files are included source

• Use glob patterns in @source ending with **/* thoughtfully — dynamic path segments are preserved to avoid unnecessary file system walks that slow incremental builds source

• Resolve TypeScript path aliases like @/ in CSS @import statements — configure tsconfig.json paths and they will be resolved automatically by the Vite plugin source

• Track external file changes with @source — modifications to files listed in @source declarations trigger a full page reload in development, not just CSS re-compilation source

• Expect sourcemap generation in development — v4.3.1 fixed incorrect sourcemap warnings, so HMR and debugging are now reliable source

• Import JavaScript entries for packages in @plugin directives — when resolving package names, @tailwindcss/vite uses JavaScript entry points, not CSS entries, for correct plugin loading source

• Scan raw file contents in templates before transforms — the Vite plugin scans unprocessed files to detect utilities, preventing false negatives from framework transforms source

• Accept that Astro production builds may re-include classes from client-only components — the Vite plugin doesn't rely on the module graph for client-only component detection to ensure completeness source

Related: tailwindcss-skilld