Tailwind CSS
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
A Sublime Text CSS syntax extension with support for Tailwind CSS
Requires ST 4092 or higher.
Install
Package Control:
- Open
Command Palette
using menu itemTools → Command Palette
orCMD/CTRL
+SHIFT
+P
. - Choose
Package Control: Install Package
. - Type
Tailwind CSS
and pressENTER
.
Manually:
- Download latest release and unzip. it into your Packages folder.
- Go to
Sublime Text → Preferences → Browse Packages
. - 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.
- Click onto the syntax name in the status bar
- Navigate to the sub menu
Open all with current extension as...
- 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…
- create a custom Packages/User/CSS (Tailwind).sublime-syntax
- 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.
- Augmenting syntax must be loaded after CSS in order for this trick to work.
- Only a single augmenting syntax may exist.
- 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…
- create a custom Packages/User/PostCSS (Tailwind).sublime-syntax
- 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.
- Augmenting syntax must be loaded after PostCSS in order for this trick to work.
- 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…
- create a custom Packages/User/SCSS (Tailwind).sublime-syntax
- 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 PostCSS syntax is augmented.
- Augmenting syntax must be loaded after PostCSS in order for this trick to work.
- 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:
- call Menu > Preferences > Browse Packages..
- Look for CSS folders
- Remove it or at least delete any syntax definition in it.