DEV Community

loading...

React + Tailwind 2; in 2 minutes

agamm profile image Agam ・1 min read

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

Discussion

pic
Editor guide
Collapse
steadybeaver profile image
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

Collapse
wuyuansheng35 profile image
Eddy Wu

postcss-cli is also required.

Collapse
agamm profile image
Agam Author

Thanks, added.

Collapse
yoramgondwe profile image
YoramGondwe

Thanks very straight forward

Collapse
agamm profile image
Agam Author

Yeah that was the point :)

Collapse
hrach2003 profile image
Hrach2003

getting error: Please install PostCSS 8 or above.

after installing postcss 8 - tailwind classes are not available