ūü•≥
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale ūüéĀ Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off ūüéČ
postImage

How to use Tailwind CSS in React

blogImage

By Emmanuel Chinonso

Web Developer

Tailwind CSS makes it possible for us to easily style every element directly on the components without having to create one big class in a separate file and write a bunch of properties to make something. Tailwind CSS is simply a utility-based low‚Äďlevel CSS framework. It‚Äôs not the first of its kind but it is certainly the most popular. Tailwind CSS allows us to write great CSS without leaving the file we are currently working on. In our Tailwind CSS tutorial today, we are going to look at how to install Tailwind CSS with react.

Table of Content

  • Install node
  • Create react App
  • Install Tailwind CSS via npm
  • CRACO configuration
  • Tailwind CSS Configuration
  • Add Tailwind CSS
  • Final look
  • Conclusion

Install Node

You must make sure you have the latest node installed in your system. If not, you can visit their website to download the latest node version. Make sure your node version is 12 -13.0 and higher in order to run Tailwind CSS. Once you have downloaded the latest version of node, you can open your terminal to check the latest version by running the code below

Code:

1node ‚Äďv.

Create react App

At this point you must have downloaded the latest node version. We can now go ahead to create react project.

To do this we need to run a command on our terminal.

The create-react-app command comes with pre-configured files and packages that helps install react and auto-compilation of CSS, JS and ESlint for error alerts.

Open your command line for windows and type the following code on the folder you created for this project

Code

1npx create-react-app react-twcss.
2cd react-twcss

After all the dependencies are installed you will see ‚Äúsuccess‚ÄĚ at your terminal you can go ahead to run the famous code

1npm start.

The command above will start the server and it will automatically open in a browser with the react environment.

Install Tailwind CSS via npm

At this stage, it is safe for us to go ahead and install tailwind CSS in react and its dependencies. You can open your terminal and run the following command to install Tailwind CSS in react with its dependencies.

Code:

1npm install -D tailwindcss@npm:@tailwinat postcss@^7 autoprefixer@^9

This will take a few seconds to install.

CRACO configuration

The next step is to install create React App Configuration Override also known as CRACO. It’s a create-react-app configuration layer used to override the PostCSS Configuration.

Install CRACO

Code:

1npm install @craco/craco.

Once the installation is complete, open the project in a text editor (Vs Code) and locate the package.Json in your root directory. In the package.Json go ahead and replace the following files

  • react-scripts start with craco start
  • react-script build with craco build
  • react-script test with craco test

Save the updates to the package.Json file. After this, you can go ahead and create a new file and call it Craco.config.js in the root directory of your project. <react-twcss> file.

Code:

1module.exports = {
2style: {
3    postcss: {
4        plugins: [
5            require('tailwindcss'),
6            require('autoprefixer'),
7        ],
8    },
9},
10}

Tailwind CSS Configuration

Create another file named tailwind.config.js file at the root of your directory. To do this you should go ahead and run the following command

Code:

1npx tailwindcss-cli@latest init.

The command will create a file named tailwind.config.js file at the root of your project. You can Update the tailwind.config.js file new purge paths. This will enable Tailwind CSS access to remove unused styles from the components in the production build.

Code:

1module.exports = {
2¬†¬†purge:¬†[‚Äė./src/**/*.{js,jsx,tsx}‚Äô,‚Äô.public/index.html‚Äô],
3  darkMode: false, // or 'media' or 'class'
4  theme: {
5    extend: {},
6  },
7  variants: {
8    extend: {},
9  },
10  plugins: [],
11}

Add Tailwind CSS The next step is to go to your index.css file and delete the content and replace them with the following code. Code:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Then, you can go ahead and import the CSS from index.css file to the index.js file.

Code

1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4import App from './App';
5import reportWebVitals from './reportWebVitals';
6
7ReactDOM.render(
8  <React.StrictMode>
9    <App />
10  </React.StrictMode>,
11  document.getElementById('root')
12);
13reportWebVitals();

Final look

we are going to create a simple card using tailwind CSS in react we just created. We are going to open our APP.js file and delete the code there and write the code below.

Code:

1function App() {
2  return (
3    <section className="App h-screen w-full flex justify-center items-center bg-purple-500">
4      <div className="w-full max-w-md bg-white-800">
5        <div className="rounded-t-xl bg-white px-6 py-6 md:p-6 text-lg md:text-xl leading-8 Md:leading-8 font-semibold">
6          <p className="text-purple-900 text-xl md:text-xl font-black text-center pb-2">
7            Tailwind CSS
8          </p>
9          <p className="text-indigo-700 text-base md:text-base italic font-normal text-center">
10            "A utility-first CSS framework for rapid UI development. "
11          </p>
12        </div>
13        <div 
14className="flex items-center space-x-4 p-6 md:px-6 md:py-6 bg-gradient-to-tr from-purple-700 to-indigo-700 rounded-b-xl leading-6 font-semibold text-white">
15          <div className="flex-none w-14 h-14 bg-white rounded-full shadow-2xl items-center justify-center">
16            <svg height="54" 
17preserveAspectRatio="xMidYMid" 
18width="54" xmlns="http://www.w3.org/2000/svg" 
19viewBox="0 0 256 153.6">
20<linearGradient id="a" x1="-2.778%" y1="32%" y2="67.556%">
21<stop offset="0" stop-color="#2298bd" /><stop offset="1" stop-color="#0ed7b5" />
22</linearGradient>
23<path 
24d="M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8z" 
25fill="url(#a)" />
26</svg>
27          </div>
28          <div className="flex-auto text-base md:text-base font-thin">
29            Created By
30 <br />
31 <span className="text-xl md:text-xl text-purple-200 font-black">
32 Adam Wathan
33 </span>
34          </div>
35        </div>
36      </div>
37    </section>
38  );
39}
40
41export default App;

Your browser should look similar to the image below.

Tailwind CSS in React

Conclusion

In this tailwind CSS tutorial, we walked you through how to install tailwind CSS in react with a step by step approach. We also created a simple ‚ÄúHello world‚ÄĚ styling it with a tailwind CSS classes to demonstrate that the installation is working perfectly well. I hope you enjoyed this tutorial! you can check our other tailwind

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...