TailwindCSS is getting popular day by day in web development industry. React is also very popular library to design modern user interfaces with JavaScript. This guide will help you install TailwindCSS in React JS project.
Pre-requisites to Install TailwindCSS
As you might know the node JS is required for working react and TailwindCSS. So, If you haven’t installed node js, download it from the official website.
Step 1: Create a React App with create-react-app
First, you need to create a react app with create-react-app. If you are using something else for creating react app, it works as well. Use the following commands to create a react app and change your current directory to the the project you created.
|
1 2 3 4 5 6 7 |
npx create-react-app my-project cd my-project |
After you have created a react app, run and verify the home page on localhost:3000.
Step 2: Install TailwindCSS in React Project
Now, the next step is to install TailwindCSS as development dependency. Use the following command to install TailwindCSS in your project. It will take some time depending on your internet connection.
You’ll also need to install the postcss and autoprefixer for TailwindCSS to work perfectly. So, the following command will install all the 3 things required for TailwindCSS.
|
1 2 3 4 5 |
npm install -D tailwindcss postcss autoprefixer |
Step 4: Create a TailwindCSS config File
TailwindCSS config file used to add configurations for TailwindCSS. So, you need to create a config file with the following command.
|
1 2 3 4 5 |
npx tailwindcss init -p |
After the command executes, you’ll see a new file tailwind.config.js in your project.
Step 6: Add Content Files to TailwindCSS Configurations
Now open the tailwind.config.js file you just created with the last step described above. You’ll see an array of content in the file. Just replace the content array with the following code in config file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } |
Step 7: Add TailwindCSS Directives to index.css File
TailwindCSS base directives are the starting point for the TailwindCSS compiler to see what classes should be generated in the output file. Open the index.css file and replace everything with the following 3 lines.
|
1 2 3 4 5 6 7 |
@tailwind base; @tailwind components; @tailwind utilities; |
Step 8: Add TailwindCSS Classes to Your JSX
This is the final step to install TailwindCSS in React JS project. After everything you did above, the last part is to add the TailwindCSS classes to your JSX and see the output. The following code adds simple TailwindCSS utility classes in App.jsx.
|
1 2 3 4 5 6 7 8 9 10 11 |
export default function App() { return ( <h1 className="text-3xl font-bold underline"> Hello world with TailwindCSS </h1> ) } |
Final STEP : Run The Project
After installing TailwindCSS in your React JS application, you just need to verify that it works. So, go ahead and run the project on localhost with the following command and check the output on localhost:3000.
|
1 2 3 4 5 |
npm run start |
Conclusion
TailwindCSS is awesome with React JS to design customized design for web applications. Installing TailwindCSS in React JS is not a hard thing to do if you follow the instructions carefully. Please check the official documentation if you need more information about TailwindCSS.