VS Code Tailwind CSS Cheat Sheet
Sidebar
Programming · VS Code Tailwind CSS Cheat Sheet
The Tailwind CSS IntelliSense extension's settings, the VS Code settings it recommends, and the Tailwind v4 CSS directives. Checked against extension 0.16.0 installed here and the Tailwind CSS v4.3 documentation. Sheet 18 in the VS Code series.
Getting It Working
Extension IDbradlc.vscode-tailwindcss (version 0.16.0 here): autocomplete, hover previews and linting for Tailwind classesNeeds tailwindcss installedIn your project (npm, pnpm or yarn); the extension cannot work from the editor aloneTailwind v4 and laterA .css file that contains @import "tailwindcss"; (the extension finds it automatically)Tailwind v3 and earlierA tailwind.config.js (or .cjs, .mjs, .ts, .cts, .mts) in the workspace, or a stylesheet that points to one with @configTailwind CSS: Show OutputCommand Palette: opens the language server log; first place to look if nothing worksTailwind CSS: Sort SelectionCommand Palette (pre-release): sort selected classes in Tailwind's recommended orderTailwind CSS language modeAn alternative to VS Code's CSS mode that understands Tailwind at-rulesRecommended VS Code Settings
files.associations{ "*.css": "tailwindcss" }: open CSS files in Tailwind CSS mode so @apply, @theme and so on are not flagged as unknowneditor.quickSuggestions{ "strings": "on" }: lets class suggestions appear inside quoted attribute values (off for strings by default)editor.colorDecoratorsMust be on (default) for the extension's colour swatchesWhere It Works (language and class detection)
tailwindCSS.classAttributesAttributes treated as class lists (default ["class", "className", "ngClass", "class:list"])tailwindCSS.classFunctionsFunction or tagged-template names whose strings are classes, e.g. ["clsx", "cn", "tw"] (default none)tailwindCSS.includeLanguagesMap an unsupported language to a supported one, e.g. { "plaintext": "html" } (default {})tailwindCSS.emmetCompletionsClass completions inside Emmet abbreviations such as div.bg-red-500 (default false)tailwindCSS.files.excludeGlobs ignored by all features; inherits from files.exclude (default skips .git, node_modules, .hg, .svn)tailwindCSS.experimental.classRegexYour own patterns for finding class strings (experimental, default none)tailwindCSS.experimental.configFileName the CSS entry file (v4) or config file (v3) yourself; a string, or an object mapping files to globs for several projectsFeatures On / Off
tailwindCSS.suggestionsAutocomplete (default true)tailwindCSS.hoversHover preview showing the CSS a class generates (default true)tailwindCSS.codeActionsQuick fixes, e.g. for conflicting classes (default true)tailwindCSS.codeLensCode lens annotations (default true)tailwindCSS.colorDecoratorsColour swatches next to colour classes and functions (default true)tailwindCSS.validateLinting master switch (default true)tailwindCSS.showPixelEquivalentsShow px next to rem values (default true)tailwindCSS.rootFontSizeRoot font size used for that conversion (default 16)Lint Rules (each: ignore, warning or error)
tailwindCSS.lint.cssConflictTwo classes on one element set the same CSS property (default warning)tailwindCSS.lint.suggestCanonicalClassesA class could be written in a shorter form (default warning)tailwindCSS.lint.recommendedVariantOrderVariants not in the recommended order (default warning)tailwindCSS.lint.usedBlocklistedClassA class you excluded with @source not inline(…) is used (default warning)tailwindCSS.lint.deprecatedAtRuleOld Tailwind at-rules (default warning)tailwindCSS.lint.invalidApply@apply used in an unsupported way (default error)tailwindCSS.lint.invalidConfigPathUnknown path in the theme() function (default error)tailwindCSS.lint.invalidTailwindDirectiveUnknown value after @tailwind (default error)tailwindCSS.lint.invalidScreen / lint.invalidVariantUnknown screen or variant name in older directives (default error)Tailwind v4 CSS Directives
@import "tailwindcss";Load Tailwind itself; this line is what the extension looks for@theme { … }Define design tokens such as colours, fonts and breakpoints as CSS variables, e.g. --color-brand: #38bdf8;@source "path";Tell Tailwind to scan extra files for class names@utility name { … }Add your own utility class that works with variants@variant dark { … }Apply a built-in variant to your own CSS@custom-variant name (selector);Create a new variant@apply a b c;Inline existing utilities into your own CSS rule@reference "file";Use the theme and utilities in a component stylesheet without repeating the output CSS@config / @pluginLoad a v3-style config file or plugin (kept for compatibility)--alpha() --spacing()Functions: change a colour's opacity, and get a spacing value, e.g. --spacing(4)theme()Older function for reading theme values (deprecated in v4; use CSS variables)Tailwind Habits Worth Knowing (my knowledge)
State variantshover:, focus:, dark:, md:, group-hover:: put the variant in front of any utilityArbitrary valuesw-[137px], bg-[#38bdf8]: square brackets for one-off valuesImportantPut ! at the end (v4) or the start (v3) of a class to force it; check which your version usesPrettier pluginprettier-plugin-tailwindcss sorts classes on save (see the Prettier sheet)Dark modeIn v4, dark: follows the OS by default; use @custom-variant for a class-based switchA Reasonable Starter Set (my suggestions, not defaults)
"files.associations": { "*.css": "tailwindcss" }Recommended by the extension itself"editor.quickSuggestions": { "strings": "on" }Class completion inside attribute strings"tailwindCSS.classFunctions": ["clsx", "cn"]If you use helper functions to build class strings"tailwindCSS.includeLanguages": { "astro": "html" }Only if class suggestions do not appear in .astro files"tailwindCSS.lint.cssConflict": "error"Make conflicting classes impossible to missNo suggestions or hovers? Check these
1) Is tailwindcss installed in the project? 2) For v4, does a .css file contain @import "tailwindcss";? (Sass, Less and Stylus files do not count.) For v3, is there a tailwind.config.*? 3) Are those files hidden by files.exclude, files.watcherExclude or tailwindCSS.files.exclude? 4) Run Tailwind CSS: Show Output. 5) With several Tailwind installs or entry stylesheets, set tailwindCSS.experimental.configFile. 6) For attribute strings, set editor.quickSuggestions as above.
"Unknown at rule @apply" from VS Code itself
VS Code's built-in CSS checker does not know Tailwind's at-rules and underlines them. Fix it by opening CSS files in Tailwind CSS mode with files.associations (see the second card), or by turning off the built-in check with { "css.lint.unknownAtRules": "ignore" }.