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

Tailwind CSS

by SublimeText ST4

Tailswind CSS syntax for Sublime Text

Labels language syntax

Details

Installs

  • Total 13K
  • Win 5K
  • Mac 4K
  • Linux 3K
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 Nov 5 Nov 4 Nov 3 Nov 2 Nov 1 Oct 31 Oct 30 Oct 29 Oct 28 Oct 27 Oct 26 Oct 25 Oct 24 Oct 23 Oct 22 Oct 21 Oct 20 Oct 19 Oct 18 Oct 17 Oct 16 Oct 15 Oct 14 Oct 13 Oct 12 Oct 11 Oct 10 Oct 9 Oct 8 Oct 7
Windows 1 4 1 4 3 1 4 0 0 2 3 7 4 3 3 4 4 0 2 2 3 5 5 7 3 3 4 4 0 5 3 4 5 4 4 2 4 1 5 2 1 2 2 2 5 1
Mac 0 2 2 1 1 0 0 0 0 4 2 5 2 7 2 3 4 3 2 1 1 2 5 5 3 1 4 1 4 2 1 3 0 0 1 1 1 2 1 2 4 2 2 4 4 1
Linux 1 2 1 1 3 4 2 0 0 3 3 1 2 1 4 0 2 3 3 2 0 0 4 3 1 1 1 2 3 1 1 1 1 4 2 1 2 4 4 3 1 2 1 3 2 1

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.