Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, and easy integration of existing classes directly into the HTML code. This is to remove unused CSS code for improving our application overall. To know more about relative links click here
You will need a desktop or laptop with one of the following OS.
Windows OS (with administrative access)
Ubuntu OS (should have a non-root user account with sudo access)
Mac OS (High Sierra or higher with administrative access)
Before we create React App we need to install node.js.
if you already installed node.js please ignore this step 1 and go to step 2
Step 2: Create a React-app
After installing Node.js open the terminal or command prompt and create a React app with the following commands
and then install Tailwind CSS with the following commands. To know more about tailwind configuration, please click here.
react_tailwindcss_example → tailwind.config.js
Update the tailwind.config.js in the above path, using the following snippet.
After updating the tailwind.config.js file, it will look like the below screenshot.
Add the @tailwind directives for each of Tailwind’s layers to your index.css in the above path, using the following snippet.
After adding @tailwind directives in index.css, it will look like the below screenshot.
In Tailwind CSS we follow the inline styling method, therefore to test the tailwind CSS installation, please replace the contents of App.js in the above path, with the below snippet in your project.
A Sample GitHub repo, with all the required configurations, is given below.
Run the react Application with the following command.
After running your application open your browser and check the following URL:
The Example UI is shown in the following screenshot.