← 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
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.

{
  // 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

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