npx create-react-app tw-app
npx tailwindcss init --full
yarn add tailwindcss postcss-cli autoprefixer -D
const tailwindcss = require('tailwindcss')
module.exports = {
plugin: [
tailwindcss('./tailwind.config.js'),
require('autoprefixer')
]
}
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;
"tailwind:build": "tailwind build src/styles/tailwind.css -o src/styles/app.css"
"start": "npm run tailwind:build && react-scripts start",
"build": "npm run tailwind:build && react-scripts build",
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!