Configuring Tailwind CSS in a React JS Project
In this era of CSS libraries and frameworks, there are tons of great libraries that you can use in your next project to simplify your work and build intuitive interfaces. Tailwind CSS, a utility-first CSS framework that makes it easy for developers to easily tailor web applications by choosing ready-made CSS classes from the framework. This simple and easy approach has popularised Tailwind CSS among other CSS frameworks and among developers due to its ability to speed up the styling process.
If you haven’t interacted with Tailwind CSS, you are missing a lot! You can check it out here Tailwind CSS. In this article, am going to take you on a simple code along to aid you in integrating Tailwind CSS in a React js Project.
- Create your Project Directory
In your terminal create a new folder/directory by typing mkdir (name of the folder)
- Inside the folder, you’ve created create a react application
There are two ways of creating a react application, npx and yarn. These two packages do the same thing but in a different ways and have their own pros and cons. You can read more in this article.
Change directory (cd)
Create react app
- Using npx
- Using yarn
Our react application is created. Happy Hacking!!,
2. Install Tailwind CSS
Now that we have created our react-app, the next step is to cd into our tailwind-config application and install Tailwind CSS. We can easily achieve this by using the node package manager (npm)
The first command installs Tailwind into our application while the second command creates a tailwind.config.js in our application. Tailwind is designed to look for a tailwind.config.js file in your root application. The tailwind.config.js file aids you in customizing your application.
3. Configure your Template Path
Now that we have Tailwind installed in our application, the next step is to direct tailwind to where our project files are and the extensions they are in. This is done in the tailwind.config.js file. In react, the src folder is where most of our development process takes place and so we are going to link it to our tailwind.config.js file.
4. Adding Tailwind Directives to your CSS
When we create a new react application our src folder comes with a lot of files that are important in the initial process of starting and checking if our application is working correctly but as we build our application some files are altered to enhance our production.
The last step to configuring Tailwind in our react js project is by adding Tailwind Directives to our index.css file in the src folder.
After completely adding the directives to your index.css, Tailwind CSS is installed and configured in your application and you can proceed and use it in development.
Start your application by running npm start on the terminal
On the App.js file delete the default codes with this:-
As easy as that!
