Tailwind CSS

A Sublime Text CSS syntax extension with support for Tailwind CSS

Requires ST 4092 or higher.

Install

Package Control:

1. Open Command Palette using menu item Tools → Command Palette or CMD/CTRL + SHIFT +P.
2. Choose Package Control: Install Package.
3. Type Tailwind CSS and press ENTER.

Manually:

1. Download latest release and unzip. it into your Packages folder.
2. Go to Sublime Text → Preferences → Browse Packages.
3. Move folder to inside and rename the folder to Tailwind CSS.

Usage

CSS

This syntax is assigned to files which end with tailwind.css by default.

To use it for ordinary *.css files manual assignment is needed.

1. Click onto the syntax name in the status bar
2. Navigate to the sub menu Open all with current extension as...
3. Click on Tailwind CSS.

To add highlighting for Tailwind @-rules to CSS in a way they are also supported within component syntaxes like Svelte or VueJS…

1. create a custom Packages/User/CSS (Tailwind).sublime-syntax
2. paste the following content:

%YAML 1.2
   ---
   name: CSS (Tailwind)
   scope: source.css
   version: 2

   extends:
     - Packages/Tailwind CSS/Tailwind CSS.sublime-syntax

[!WARNING]

By assigning source.css main scope original PostCSS syntax is augmented.

1. Augmenting syntax must be loaded after CSS in order for this trick to work.
2. Only a single augmenting syntax may exist.
3. Syntaxes, which extend core CSS to add their own rules can't be augmented this way.

PostCSS

To add highlighting for Tailwind @-rules to PostCSS in a way they are also supported within component syntaxes like Svelte or VueJS…

1. create a custom Packages/User/PostCSS (Tailwind).sublime-syntax
2. paste the following content:

%YAML 1.2
   ---
   name: PostCSS (Tailwind)
   scope: source.postcss
   version: 2

   extends:
     - Packages/Tailwind CSS/Tailwind CSS.sublime-syntax
     # - ... maybe more additions
     - Packages/PostCSS/PostCSS.sublime-syntax

[!WARNING]

By assigning source.postcss main scope original PostCSS syntax is augmented.

1. Augmenting syntax must be loaded after PostCSS in order for this trick to work.
2. Only a single augmenting syntax may exist.

[!NOTE]

requires: - Sublime Text build 4152+ - PostCSS 3.0.0+

SCSS

To add highlighting for Tailwind @-rules to SCSS in a way they are also supported within component syntaxes like Svelte or VueJS…

1. create a custom Packages/User/SCSS (Tailwind).sublime-syntax
2. paste the following content:

%YAML 1.2
   ---
   name: SCSS (Tailwind)
   scope: source.scss
   version: 2

   extends:
     - Packages/Tailwind CSS/Tailwind CSS.sublime-syntax
     # - ... maybe more additions
     - Packages/Sass/Syntaxes/SCSS.sublime-syntax

[!WARNING]

By assigning source.scss main scope original SCSS syntax is augmented.

1. Augmenting syntax must be loaded after SCSS in order for this trick to work.
2. Only a single augmenting syntax may exist.

[!NOTE]

requires: - Sublime Text build 4152+ - Sass 4.0.0+

Related Extensions

• LSP-tailwindcss

Troubleshooting

Tailwind CSS extends Sublime Text's CSS syntax definitions.

If Tailwind CSS syntax highlighting doesn't work and console displays syntax errors in Tailwind CSS.sublime-syntax, please make sure to remove any out-dated syntax override.

Steps:

1. call Menu > Preferences > Browse Packages..
2. Look for CSS folders
3. Remove it or at least delete any syntax definition in it.