Editor Setup

Set up your editor with IntelliSense, linting, and other helpful features to maximize your productivity when working with Tailwind CSS.

VS Code IntelliSense

The official Tailwind CSS IntelliSense extension for Visual Studio Code provides autocomplete, syntax highlighting, and linting.

Installation

Install the Tailwind CSS IntelliSense extension from the VS Code marketplace
Reload VS Code

That’s it! IntelliSense will automatically work in any project with Tailwind CSS installed.

The extension automatically detects Tailwind CSS in your project by looking for the tailwindcss package in your node_modules.

Features

The IntelliSense extension provides several powerful features:

Autocomplete

Get intelligent suggestions for class names as you type:

<div class="flex items-|">
  <!-- Autocomplete suggestions appear here -->
</div>

The extension suggests:

All available utility classes
Variant modifiers (hover:, focus:, md:, etc.)
Custom classes from your configuration
Color opacity modifiers

Hover Preview

Hover over any Tailwind class to see the CSS it generates:

<div class="bg-blue-500">
  <!-- Hover over bg-blue-500 to see: background-color: rgb(59 130 246); -->
</div>

CSS Language Features

IntelliSense works in CSS files with @apply directives:

.btn {
  @apply px-4 py-2 rounded |
  /* Autocomplete works here */
}

Linting

The extension provides real-time linting to catch errors:

Unknown class names
Invalid variant combinations
Deprecated utilities
CSS conflicts

Linting helps you catch typos and ensures you’re using valid Tailwind utilities. Enable it in your VS Code settings.

Configuration

Customize the extension behavior in your VS Code settings:

.vscode/settings.json

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.validate": true,
  "tailwindCSS.lint.cssConflict": "warning",
  "tailwindCSS.lint.invalidApply": "error",
  "tailwindCSS.lint.invalidScreen": "error",
  "tailwindCSS.lint.invalidVariant": "error"
}

Language Support

IntelliSense works in multiple file types:

HTML
JSX/TSX (React)
Vue
Svelte
Angular templates
PHP
Twig
ERB

For additional language support, update your settings:

.vscode/settings.json

{
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  }
}

Custom Class Regex

If you’re using Tailwind classes in non-standard ways (like with a CSS-in-JS library), configure custom regex patterns:

.vscode/settings.json

{
  "tailwindCSS.experimental.classRegex": [
    // For styled-components
    "tw`([^`]*)",
    "tw\"([^\"]*)",
    "tw={'([^'}]*)",
    "tw={\"([^\"}]*)",
    
    // For clsx / classnames
    "clsx\\(([^)]*)\\)",
    "classnames\\(([^)]*)\\)",
    
    // For cva (class variance authority)
    "cva\\(([^)]*)\\)",
    
    // For custom functions
    "cn\\(([^)]*)\\)"
  ]
}

Custom regex patterns should be carefully tested as incorrect patterns can cause IntelliSense to not work properly.

JetBrains IDEs

For WebStorm, PhpStorm, and other JetBrains IDEs:

Built-in Support

JetBrains IDEs have built-in Tailwind CSS support:

Ensure Tailwind CSS is installed in your project
The IDE will automatically detect and enable Tailwind support

Features

Class name completion
CSS preview on hover
Syntax highlighting
Navigation to definitions

Configuration

Enable or configure Tailwind support:

Go to Settings/Preferences → Languages & Frameworks → Style Sheets → Tailwind CSS
Check Enable Tailwind CSS support
Configure any additional settings

Neovim

For Neovim users, set up Tailwind IntelliSense with the Language Server Protocol (LSP):

Installation with nvim-lspconfig

init.lua

require('lspconfig').tailwindcss.setup({
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = {
          "tw`([^`]*)",
          "tw\"([^\"]*)",
          "tw={'([^'}]*)",
          "tw={\"([^\"}]*)",
        },
      },
    },
  },
})

With LazyVim

return {
  "neovim/nvim-lspconfig",
  opts = {
    servers = {
      tailwindcss = {
        settings = {
          tailwindCSS = {
            experimental = {
              classRegex = {
                "tw`([^`]*)",
              },
            },
          },
        },
      },
    },
  },
}

The Tailwind CSS Language Server is the same one used by the VS Code extension, ensuring consistent behavior across editors.

Sublime Text

For Sublime Text users:

Install LSP via Package Control
Install LSP-tailwindcss via Package Control
Restart Sublime Text

Automatic Class Sorting

Keep your classes organized automatically with Prettier:

Installation

Install the official Prettier plugin:

npm install -D prettier prettier-plugin-tailwindcss

Configuration

Add the plugin to your Prettier config:

.prettierrc.js

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

Or in package.json:

package.json

{
  "prettier": {
    "plugins": ["prettier-plugin-tailwindcss"]
  }
}

How It Works

The plugin automatically sorts your classes following Tailwind’s recommended order:

Before

<div class="pt-4 text-center bg-blue-500 text-white rounded">

After

<div class="rounded bg-blue-500 pt-4 text-center text-white">

The sorting order is:

Layout (display, position, etc.)
Box model (width, height, margin, padding)
Backgrounds and borders
Typography
Effects (shadows, opacity)
Transforms and transitions
Filters

Consistent class ordering improves code readability and makes it easier to work in teams.

ESLint Integration

For additional linting, integrate with ESLint:

Installation

Terminal

npm install -D eslint-plugin-tailwindcss

Configuration

Add to your .eslintrc.js:

.eslintrc.js

module.exports = {
  plugins: ['tailwindcss'],
  rules: {
    'tailwindcss/classnames-order': 'warn',
    'tailwindcss/no-custom-classname': 'warn',
    'tailwindcss/no-contradicting-classname': 'error',
  },
}

VS Code Settings Recommendations

Optimal VS Code settings for Tailwind development:

.vscode/settings.json

{
  // Enable Emmet for JSX/TSX
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  
  // Enable quick suggestions in strings
  "editor.quickSuggestions": {
    "strings": "on"
  },
  
  // Format on save with Prettier
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // Tailwind IntelliSense settings
  "tailwindCSS.emmetCompletions": true,
  "tailwindCSS.validate": true,
  "tailwindCSS.suggestions": true,
  
  // File associations
  "files.associations": {
    "*.css": "tailwindcss"
  },
  
  // Color decorators
  "editor.colorDecorators": true
}

Workspace Recommendations

Create a .vscode/extensions.json file to recommend extensions to your team:

.vscode/extensions.json

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

Team members will be prompted to install these extensions when they open the project.

Troubleshooting

IntelliSense Not Working

If IntelliSense isn’t working:

Verify Tailwind CSS is installed: Check that tailwindcss is in your package.json dependencies
Reload VS Code: Press Cmd/Ctrl + Shift + P and run “Developer: Reload Window”
Check the extension is enabled: Look for “Tailwind CSS IntelliSense” in your extensions list
Review the output panel: Check the “Tailwind CSS IntelliSense” output for errors

Autocomplete in JSX Strings

If autocomplete isn’t working in JSX string literals:

.vscode/settings.json

{
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

Performance Issues

For large projects, optimize IntelliSense performance:

.vscode/settings.json

{
  "tailwindCSS.files.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**",
    "**/.svn/**",
    "**/dist/**",
    "**/build/**"
  ]
}

Tailwind CSS v4’s Rust-powered engine significantly improves IntelliSense performance compared to v3.

Getting Started

Core Concepts

Customization

Build Integration

Advanced

Upgrading

​Editor Setup

​VS Code IntelliSense

​Installation

​Features

​Autocomplete

​Hover Preview

​CSS Language Features

​Linting

​Configuration

​Language Support

​Custom Class Regex

​JetBrains IDEs

​Built-in Support

​Features

​Configuration

​Neovim

​Installation with nvim-lspconfig

​With LazyVim

​Sublime Text

​Automatic Class Sorting

​Installation

​Configuration

​How It Works

​ESLint Integration

​Installation

​Configuration

​VS Code Settings Recommendations

​Workspace Recommendations

​Troubleshooting

​IntelliSense Not Working

​Autocomplete in JSX Strings

​Performance Issues

​Next Steps

Core Concepts

Customization

Build docs developers (and LLMs) love

Editor Setup

VS Code IntelliSense

Installation

Features

Autocomplete

Hover Preview

CSS Language Features

Linting

Configuration

Language Support

Custom Class Regex

JetBrains IDEs

Built-in Support

Features

Configuration

Neovim

Installation with nvim-lspconfig

With LazyVim

Sublime Text

Automatic Class Sorting

Installation

Configuration

How It Works

ESLint Integration

Installation

Configuration

VS Code Settings Recommendations

Workspace Recommendations

Troubleshooting

IntelliSense Not Working

Autocomplete in JSX Strings

Performance Issues

Next Steps