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

Tailwind CSS

by SublimeText ST4

Tailswind CSS syntax for Sublime Text

Details

Installs

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

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.