ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Tailwind CSS

by SublimeText ST4 Trending

Tailswind CSS syntax for Sublime Text

Details

Installs

  • Total 14K
  • Win 6K
  • Mac 5K
  • Linux 3K
Apr 3 Apr 2 Apr 1 Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4 Mar 3 Mar 2 Mar 1 Feb 28 Feb 27 Feb 26 Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17
Windows 1 4 7 7 1 2 4 6 4 4 3 2 0 3 2 3 7 4 1 4 9 3 3 4 2 2 3 4 3 5 5 4 1 3 6 3 2 3 7 1 2 2 7 2 8 4
Mac 0 1 7 1 4 2 0 1 2 2 0 1 3 0 0 3 1 3 1 0 1 1 4 5 3 2 1 0 1 1 4 2 0 2 7 2 5 3 4 1 2 3 0 2 1 3
Linux 0 0 4 4 2 3 3 0 1 1 6 2 2 2 4 5 2 4 0 1 3 4 3 1 1 5 1 4 1 1 4 2 2 4 4 2 1 3 3 3 2 5 2 3 3 2

Readme

Source
raw.​githubusercontent.​com

Tailwind CSS

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:
Error: language “yml” is not supported
%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:
Error: language “yml” is not supported
%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:
Error: language “yml” is not supported
%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 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+ - Sass 4.0.0+

Related Extensions

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.