Setup Tailwind CSS v3 With React
Easy setup with create-react-app
In this article, I'll be showing you how to setup Tailwind CSS v3 with React so you start building great UIs in React with Tailwind's utility classes.
Bootstrap React App
First, lets create a new react app using create-react-app
:
npx create-react-app app-name
Then change into its directory:
cd app-name
Replacing app-name with the name of your application
Installing & Initializing Tailwind
Next, we can install Tailwind CSS and its peer dependencies as dev dependenciees:
npm install -D tailwindcss postcss autoprefixer
After installing the dependencies, we can run the init command to generate a tailwind.config.js
file:
npx tailwindcss init -p
Updating Config File
Next, we need to update the content
property in the tailwind.config.js
file:
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Add Tailwind Directives To CSS File
Lastly, we need to add the following @tailwind
directives to the index.css
file in the src
directory:
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
We're Finished
We can now run the react app with npm start
and everything should be working. You can now start using Tailwind CSS in your project.
Take Away
In this article, you have learned how to setup Tailwind CSS with a create-react-app project. I hope this guide has helped you and have a great day!
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, subscribe to my newsletter and follow me on my other social platforms:
GitHub: Blake-K-Yeboah
LinkedIn: Blake Yeboah
Twitter: Blake Yeboah
You can also show your support by buying me a coffee 😃