yarn add tailwind
npx tailwindcss init
This should create a tailwind.config.js
file.
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"
}
stylelint.config.js
fileInstall 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
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,
},
};
.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.
{
// 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"
}
]
}
import "./styles/tailwind.output.css";