Skip to main content

Editor Setup - Tailwind CSS

Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS.

Syntax Support​

Tailwind CSS uses custom CSS at-rules like @tailwind, @apply, and @config, which may trigger warnings in some editors. Install a PostCSS language support plugin for your editor to avoid these issues.

For VS Code, use the official Tailwind CSS IntelliSense plugin, which includes:

  • Autocomplete
  • Linting
  • Hover Previews
  • Syntax Highlighting

IntelliSense for VS Code​

Enhances the Tailwind development experience with features like autocomplete, syntax highlighting, and linting.

Check out the project on GitHub or add it to Visual Studio Code.

Automatic Class Sorting with Prettier​

Use the official Prettier plugin to automatically sort your classes following the recommended class order.

<!-- Before -->
<button
  class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">
  ...
</button>

<!-- After -->
<button
  class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">
  ...
</button>

JetBrains IDEs​

JetBrains IDEs like WebStorm and PhpStorm include support for intelligent Tailwind CSS completions in HTML and @apply.

Learn more about Tailwind CSS support in JetBrains IDEs.

For more detailed instructions, visit the Tailwind CSS Editor Setup Guide.