DEV Community

Agam
Agam

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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: {},
    }
  }
Enter fullscreen mode Exit fullscreen mode

Initialize tailwind

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

tailwind.css file

Put it in src/tailwind.css, contents:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

Test

in App.js

import './App.css';

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

Start!

npm start

Top comments (8)

Collapse
 
steadybeaver profile image
steady-beaver • 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

Collapse
 
agboolaidris profile image
Agboola Idris

this work for me, thank you

Collapse
 
wuyuansheng1982 profile image
Eddy Wu

postcss-cli is also required.

Collapse
 
agamm profile image
Agam

Thanks, added.

Collapse
 
yoramgondwe profile image
YoramGondwe

Thanks very straight forward

Collapse
 
agamm profile image
Agam

Yeah that was the point :)

Collapse
 
andrii profile image
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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.