← Return home

Minimal Tailwind + React in VSCode setup

1. Install Tailwind

yarn add tailwind
npx tailwindcss init

This should create a tailwind.config.js file.

2. Update package.json

// package.json
"scripts": {
"build:tailwind": "tailwindcss build src/styles/tailwind.css -o src/styles/tailwind.output.css",
"prestart": "yarn build:tailwind",
"prebuild": "yarn build:tailwind",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

3. Add stylelint.config.js file

Install stylelint extension from https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint. This will let you use @apply rules in your Tailwind CSS.

Also install the recommended configuration:

yarn add stylelint-config-recommended -D
// stylelint.config.js
module.exports = {
extends: ["stylelint-config-recommended"],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
"declaration-block-trailing-semicolon": null,
"no-descending-specificity": null,
},
};

4. Update .vscode/settings.json

Install File Watcher extension from https://marketplace.visualstudio.com/items?itemName=appulate.filewatcher.

This will rebuild your styles every time your Tailwind file changes.

// settings.json
{
// turn off the CSS linter in favor of stylelint, in order to support Tailwind @ rules
"css.validate": false,
"filewatcher.commands": [
{
"match": "tailwind.css",
"isAsync": true,
"cmd": "yarn --cwd ${workspaceRoot} build:tailwind",
"event": "onFileChange"
}
]
}

5. Import Tailwind in React

// App.js
import "./styles/tailwind.output.css";