# Setup Tailwind CSS v3 With React
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:
```javascript
// 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:
```css
/* 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](https://github.com/Blake-K-Yeboah)
**LinkedIn:** [Blake Yeboah](https://www.linkedin.com/in/blake-yeboah/)
**Twitter:** [Blake Yeboah](https://twitter.com/BlakeYeboah)
You can also show your support by buying me a coffee 😃
