Bootstrapping React with Tailwind

This post is very old and contains obsolete information.

This is straight from the Tailwind Install Guide but here so I can remember it easier.

Setup the project

1
2
  npx create-react-app my-app
  cd my-app

Install tailwindcss

1
2
3
4
  npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat \
      @tailwindcss/postcss7-compat \
      postcss@^7 \
      autoprefixer@^9

Install craco

1
  npm install @craco/craco

And change the scripts part of package.json:

1
2
3
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",

Create a craco.config.js file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  // craco.config.js
  module.exports = {
      devServer: {
          watchOptions: {
              ignored: /\.#|node_modules|~$/,
          },
      },
      style: {
          postcss: {
              plugins: [
                  require('tailwindcss'),
                  require('autoprefixer'),
              ],
          },
      },
  }

Tailwind Configuration

Create a tailwind.config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  // tailwind.config.js
  module.exports = {
      purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
      darkMode: false, // or 'media' or 'class'
      theme: {
          extend: {},
      },
      variants: {
          extend: {},
      },
      plugins: [],
  }

Add a src/index.css file:

1
2
3
4
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

References

https://tailwindcss.com/docs/guides/create-react-app