Skip to content
| Marketplace
Sign in
Visual Studio Code>Formatters>Tailwind CSS Language Mode FormatterNew to Visual Studio Code? Get it now.
Tailwind CSS Language Mode Formatter

Tailwind CSS Language Mode Formatter

Misha Lestev

|
734 installs
| (1) | Free
A powerful formatter for Tailwind CSS files
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Tailwind CSS Language Mode Formatter VS Code Extension

Tailwind CSS Language Mode Formatter is a Visual Studio Code extension that formats .css files when their language mode is set to Tailwind CSS.

This extension was created to address the need for formatting custom CSS within Tailwind projects, as Visual Studio Code does not provide a built-in Tailwind CSS formatter.


To use the extention, open the Command Palette and type >/tailwind Format File, or press the shortcut Alt + Shift + F.

Ensure you are using the Tailwind CSS Language Mode, check the screenshot below.

Screenshot

Features

  • Automatically sorts Tailwind CSS classes inside css files ⚡️.
  • Formats Tailwind CSS code efficiently.
  • Supports CSS minification for production-ready code.
  • Adjust indentation, brace placement, semicolon handling, and spacing around selector combinators.
  • Lightweight and simple to configure. 😊

Settings

Below are the available settings for the formatter:

Setting Type Default Description
tailwind-css-language-mode-formatter.formatStyle string "regular" Defines the CSS formatting style. Options: "regular" (standard formatting) or "minimized" (minified using a custom minimizer).
tailwind-css-language-mode-formatter.indentSize number 2 Sets the number of spaces for indentation. Accepts any positive integer.
tailwind-css-language-mode-formatter.openBracePlacement string "end-of-line" Specifies the placement of opening curly braces {. Options: "end-of-line" or "separate-line".
tailwind-css-language-mode-formatter.useAutoSemicolon boolean true Automatically inserts a trailing semicolon at the end of each CSS property declaration.
tailwind-css-language-mode-formatter.useTabs boolean false Uses tabs for indentation instead of spaces when set to true.
tailwind-css-language-mode-formatter.autoClassSorting boolean true Automatically sorts Tailwind CSS classes and variants in the recommended order. More details
tailwind-css-language-mode-formatter.spaceAroundSelectorSeparator boolean true If enabled, adds a single space around selector combinators (e.g., transforms .badge>* to .badge > *).
tailwind-css-language-mode-formatter.applyMaxLineLength number 80 Defines the maximum line length for sorted class lists. When exceeded, classes are reflowed onto new lines, preserving original indentation.

Example Configuration

To customize the formatter, you can:

  • Go to Settings → Extensions → Tailwind CSS Language Mode Formatter and adjust the options there.
  • Or add these settings (below) directly to your VS Code settings.json file,
{
    "tailwind-css-language-mode-formatter.formatStyle": "regular",
    "tailwind-css-language-mode-formatter.indentSize": 2,
    "tailwind-css-language-mode-formatter.openBracePlacement": "end-of-line",
    "tailwind-css-language-mode-formatter.useAutoSemicolon": true,
    "tailwind-css-language-mode-formatter.useTabs": false,
    "tailwind-css-language-mode-formatter.autoClassSorting": true,
    "tailwind-css-language-mode-formatter.spaceAroundSelectorSeparator": true,
    "tailwind-css-language-mode-formatter.applyMaxLineLength": 80
}

Overall Commands:

  • >/tailwind Format File

For more information

My email is lestev.mi@gmail.com

Credits

This project leverages the following open-source libraries:

  • cssbeautify – For formatting CSS code.
  • these 2 files from tailwind_formatter - For ordered list of tailwind classes & variants.

Thanks for their outstanding work.

Contributing

The greatest contributing you may offer is by reading this book. If you're on the verge of something or facing depression, this is your chance—take it.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft