Tailwind Workshop With Small Boilerplate

Small boilerplate with TailwindCSS, PostCSS and StyleLine.

VSCode

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.

Setup

• Get VSCode

Consider the Auto-Open Markdown Preview for reading the README.md-files in VSCode.

VSCode Extensions

• Tailwind CSS IntelliSense
• Headwind
• Live Server
• Stylelint <- Addition from WS with minimal boilerplate

Getting started

• npm install 🏃‍♂️
• npm run build 🏗️
• Right-click desired HTML-file, and click Open with Live Server 🚀
• Edit the HTML and enjoy live reload 😎

What is this setup 🤔?

IntelliSense

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.

Headwind

Enforces consistent ordering of classes. Which reduces the cognitive load of dealing with multiple classnames.

Live Server

Simple solution to launch a local development server with live reload.

Stylelint

VSCode's default CSS validator disallows unknown at-rules, which includes a few Tailwind at-rules (@tailwind, @responsive etc.).

There are alternative solutions that configures VSCode, but I've opted for Stylelint because "it is to style sheets what ESLint is for JavaScript".

Stylelint is configured in stylelint.config.js with a recommended standard configuration that enforce common stylistic conventions found in reputable CSS styleguides, including: The Idiomatic CSS Principles, Google's CSS Style Guide and Airbnb's Styleguide.

Rebuild config