Minimal boilerplate with TailwindCSS
This workshop uses VSCode since the Tailwind creators maintain a VSCode extension providing IntelliSense for Tailwind.
However, Tailwind is supported in WebStorm as of monday, and in Rider, PhpStorm and PyCharm under the Early Access Program.
- Get VSCode
Consider the Auto-Open Markdown Preview for reading the README.md-files in VSCode.
npx tailwindcss-cli@latest build ./tailwind.css -o ./public/tailwind.css🧙♀️- Right-click desired HTML-file, and click
Open with Live Server🚀 - Edit the HTML and enjoy live reload 😎
Provides autocomplete, linting, hover-preview and syntax-highlighting. The awesomeness lies in that it includes all the customizations in tailwind.config.js that form your design system.
Enforces consistent ordering of classes. Which reduces the cognitive load of dealing with multiple classnames.
VSCode's default CSS validator disallows unknown at-rules, which includes a few Tailwind at-rules (@tailwind, @responsive etc.).
These rules are added through the settings in the .vscode-folder to prevent the built-in CSS validator from flagging them as errors.
The core of VSCode's CSS support is implemented in the vscode-css-languageservice which supports loading custom CSS. Under the
.vscode-folder we are adding custom CSS rules for Tailwind to the CSS Language Service based on this Stack Overflow answer.
In addition, the line "editor.renameOnType": true automatically reflects changes you make in an opening HTML tag with the corresponding closing tag, so that you don't have to edit both.
Simple solution to launch a local development server with live reload.
npx tailwindcss-cli@latest build ./tailwind.css -o ./public/tailwind.css
- Changes in the
tailwind.config.js-file andtailwind.css-file are not not reflected in/public/tailwind.cssuntil the CSS has been rebuilt.