Installing Tailwind In React

Installing-Tailwind-In-React.md

Step 0) Create a new React project:

npx create-react-app tw-app

Step 1) Create tailwind config file:

npx tailwindcss init --full

Step 2) Add tailwind postcss dependencies:

yarn add tailwindcss postcss-cli autoprefixer -D

Step 3) In the project root, create postcss.config.js containing this code:

const tailwindcss = require('tailwindcss')
module.exports = {
    plugin: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer')
    ]
}

Step 4) In src directory, create a folder named styles:

mkdir styles

Step 5) In the styles directory you just created, create the file tailwind.css containing this postcss code:

@tailwind base;
@tailwind component;
@tailwind utilities;

Step 6) In package.json, add a tailwind:build script:

"tailwind:build": "tailwind build src/styles/tailwind.css -o src/styles/app.css"

Step 7) Edit the build and start scripts so that tailwind:build is run before the current commands:

"start": "npm run tailwind:build && react-scripts start",
"build": "npm run tailwind:build && react-scripts build",

Step 8) Run either npm start or npm build to generate the tailwind app.css file.

Step 9) In App.js (or your project's root component), add an import for the generated styles/app.css:

import `styles/app.css`

Step 10) Check that tailwind has been successfully installed by adding a tailwind classes such as text-6xl or text-gray-500:

<p className="text-6xl text-gray-500">Hello, World!</p>

Sample project here: https://github.com/JimLynchCodes/How-To-Install-Tailwind-In-React-Source-Code

Youtube video here: https://www.youtube.com/watch?v=_nRl46Tn1W8&t=610s

Now go forth and build awesome things! ♥️ 👍