Style your React App with TailwindCSS

Tailwind CSS is a utility-first CSS framework or Library. Which helps you in styling websites in less time.

In this article, we are going to learn how effectively you can use Tailwind in your next React Project. And how easy it would be to style your components without even touching CSS.

Let's dive in, What we are going to cover in this article?

1. Why should you use it?

2. Creating React App with TailwindCSS

3. Installation

4. How to use Tailwind in your project?

---

1. Why should you use it?

Tailwind CSS is one of the easiest ways to add styling to your React App in less time. And that's the beauty of Tailwind. Since I started using it I couldn't refrain myself from using it everywhere. The more tailwind you use, the more it will enhance the speed of design so you must try Tailwind

2. Creating React App with TailwindCSS

Let's start by creating a new React Project App. Run the following command in terminal :

npx create-react-app myapp

3. Installation

Install Tailwind

Following command will install all the dependencies which is required for TailwindCSS

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Configure Craco

React app doesn't let us override the PostCSS configuration So we need to install CRACO,

npm install @craco/craco

Add Tailwind to your CSS

Open the ./src/index.css file and replace it with the below code.

@tailwind base;
@tailwind components;
@tailwind utilities;

When we replace these code, Taiwind will swap these directories out at build-time with all of the styles it generates based on your configured design system

Create config file

npx tailwindcss init

Yay 🤩 So now our React App with Tailwind is ready. Now Let's discuss how we can use Tailwind's properties one by one.

4. How to use Tailwind in your project?

We can write CSS directly in the class name. As if I want to give red background to my header and blue for text I will write

<div className="header bg-red-500 text-blue-900"></div>

For Font-style and Text-size font-thin text-xs, font-extralight text-sm, font-normal text-lg, font-bold text-xl, font-semibold text-2xl can be used.

To decorate more we can use

Shadow ( shadow-md shadow-sm shadow-lg shadow-xl )

Margin ( m-{size}, margin-right, margin-left, margin-top, margin-bottom {mr|ml|mt|mb-{size} )

Padding ( p-{size}, padding-right, padding-left, padding-top, padding-bottom {pr|pl|pt|pb-{size} )

Height (h-{size} ),

Width ( w-{size} ),

Borders (border-{size} border-{type-solid, dashed, dotted} border-{color} border-right, border-left, border-top, border-bottom {border-r|border-l|border-t|border-b-{size} )

../src/component/header.js
import React from 'react';

export const Header = () => {
    return (
        <div className="header w-full h-8 shodow-lg border border-solid border-4 boreder-yellow-500 m-5 p-2"></div>
    )
}

export default Header

We can provide many style properties to a single component and to make it responsive we have to add breakpoints in the theme.screens section of our tailwind.config.js

Some default breakpoints are already defined. Feel free to have as few or as many screens as you want.

For example, you could use device names instead of sizes:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

This is how Tailwind can be used and I Hope this might help you in your next Project!!

Thank You for reading! 😀

Happy to connect Here!! 👋

LinkedIn | Twitter | Github