React + Tailwind 2; in 2 minutes

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

Comments

[steady-beaver]

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

[Agboola Idris]

this work for me, thank you

[Eddy Wu]

postcss-cli is also required.

[Agam]

Thanks, added.

[YoramGondwe]

Thanks very straight forward

[Agam]

Yeah that was the point :)

[Andrii]

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

I get the error: zsh: no matches found: postcss@^7