Create React App v5 is now comes with TailwindCSS v3

Great news people! Create React App v5 is just released with a bunch of upgrades such as support for Webpack 5, PostCSS 8, and one of my favourites is that it comes with TailwindCSS v3.

You are no longer in need of craco or react-app-rewired to get TailwindCSS work with CRA. All you need is just a few simple steps and let me show you.

1. Create a new react project.

npx create-react-app my-app

2. Initialize TailwindCSS.

npx tailwindcss init -p

3. Update tailwindcss.config.js.

module.exports = {
  content: [
++  "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Import TailwindCSS's directives in index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
// Other styles

Voila! Now you can use TailwindCSS in your React app as you like. Feel free to check out the full changelog of Create React App v5. Also worth to mention TailwindCSS new JIT engine is another cool thing to try on too!