React + Tailwind 2; in 2 minutes

#react #tailwindcss #npm

If you are interested in developer trends you should check out my new newsletter at: unzip.dev

I tried following most of the tutorials online, most of them had some missing parts (or only worked with yarn), let's get this going now, no BS.

Create a React app

npx create-react-app project-name

Install all the packages

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 postcss-cli

This fixes PostCSS 8 errors, will update this guide when it gets fixed (it is identical to the latest build)

Setup PostCSS

Create anew file touch postcss.config.js in the root of the project, with the contents:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

Initialize tailwind

npx tailwindcss init

`tailwind.css` file

Put it in src/tailwind.css, contents:

@tailwind base;
@tailwind components;
@tailwind utilities;

Change the `package.json` scripts

  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/tailwind.css -o src/index.css"
  },

Test

in App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <div className="bg-blue-500">
        This should be blue
      </div>
    </div>
  );
}

Start!

npm start

Top comments (8)

steady-beaver • Jan 19 '21 • Edited

Great clean article. I want to contribute with my resolved issue to save few minutes of your priceless life.

I got this:
$ npx tailwindcss init
npx: installed 81 in 8.514s
Cannot find module 'autoprefixer'

And solution is a bit hacky but works:

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest
//Down line generates also postcss.config.js file
npx tailwindcss init -p
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^8 autoprefixer@^9