Tailwind CSS in React Guide | Nikhil Learn Hub

Introduction

Tailwind CSS is a utility-first CSS framework used to design modern and responsive websites quickly.

Instead of writing custom CSS classes, Tailwind provides ready-made utility classes for:

Colors
Padding and margin
Flexbox and Grid
Typography
Responsive design

Tailwind works perfectly with React applications and helps developers build beautiful user interfaces faster.

Why Use Tailwind CSS with React?

Faster UI development
Reusable utility classes
Responsive design support
Easy customization
Cleaner component styling
No need to write large CSS files

Installing Tailwind CSS in React

Step 1: Create React Project

Bashnpm create vite@latest react-tailwind-app
cd react-tailwind-app
npm install

Step 2: Install Tailwind CSS

Bashnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Configure Tailwind

Open tailwind.config.js:

JavaScript/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Add Tailwind Directives

Open src/index.css:

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

Step 5: Start React Application

Bashnpm run dev

Tailwind CSS is now ready to use.

Utility Classes in Tailwind CSS

Tailwind provides small utility classes for styling elements directly in JSX with className.

Text Styling Example

JSXfunction App() {
  return (
    <h1 className="text-4xl font-bold text-blue-600">
      Welcome to Tailwind CSS
    </h1>
  );
}

export default App;

Class	Purpose
`text-4xl`	Large text size
`font-bold`	Bold text
`text-blue-600`	Blue text color

Background & Padding Example

JSXfunction App() {
  return (
    <div className="bg-gray-200 p-6 rounded-lg">
      Tailwind CSS Card
    </div>
  );
}

Class	Purpose
`bg-gray-200`	Gray background
`p-6`	Padding
`rounded-lg`	Rounded corners

Flexbox Example

JSXfunction App() {
  return (
    <div className="flex gap-4">
      <button className="bg-blue-500 text-white px-4 py-2">
        Login
      </button>
      <button className="bg-green-500 text-white px-4 py-2">
        Register
      </button>
    </div>
  );
}

Buttons displayed in a row
Spacing between buttons with gap-4
Colored buttons with padding utilities

Responsive Design in Tailwind CSS

Tailwind provides responsive utility classes using breakpoints.

Prefix	Screen Size
`sm:`	Small devices
`md:`	Medium devices
`lg:`	Large devices
`xl:`	Extra large devices

Responsive Text Example

JSXfunction App() {
  return (
    <h1 className="text-xl md:text-3xl lg:text-5xl">
      Responsive Heading
    </h1>
  );
}

Screen Size	Applied Style
Mobile	`text-xl`
Tablet	`md:text-3xl`
Desktop	`lg:text-5xl`

Text size changes automatically based on screen size.

Responsive Grid Example

JSXfunction App() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div className="bg-blue-200 p-4">Card 1</div>
      <div className="bg-blue-200 p-4">Card 2</div>
      <div className="bg-blue-200 p-4">Card 3</div>
    </div>
  );
}

Device	Columns
Mobile	1 column
Tablet	2 columns
Desktop	3 columns

Button Hover Effects

JSXfunction App() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
      Click Me
    </button>
  );
}

Blue button with white text
Darker blue on hover with hover:bg-blue-700
Rounded corners with rounded

Complete Card Example

JSXfunction App() {
  return (
    <div className="max-w-sm mx-auto bg-white shadow-lg rounded-lg p-6">
      <h2 className="text-2xl font-bold mb-4">
        React Tailwind Card
      </h2>
      <p className="text-gray-600">
        Tailwind CSS helps create responsive designs quickly.
      </p>
      <button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
        Learn More
      </button>
    </div>
  );
}

export default App;

Advantages of Tailwind CSS

Faster Development

Developers can style elements directly without writing separate CSS files.

Responsive Design

Easy mobile-friendly layouts using responsive prefix classes.

Reusable Utility Classes

Reduces duplicate CSS code across components.

Easy Customization

Colors, spacing, fonts, and themes can be customized in tailwind.config.js.

Modern UI Design

Tailwind helps create professional-looking interfaces quickly.

Best Practices

Use reusable React components
Keep class names organized
Avoid very long class lists (extract components or use @apply sparingly)
Use responsive classes properly
Create custom components for repeated UI patterns

Summary

In this tutorial, you learned:

Tailwind CSS introduction
Tailwind setup in React with Vite
Utility classes for text, background, and spacing
Responsive design with breakpoints
Flexbox and Grid layouts
Hover effects
Building responsive UI components

Tailwind CSS makes React development faster, cleaner, responsive, modern, and efficient.

Tailwind CSS with React MCQ Practice

10 Basic MCQs 10 Advanced MCQs

10 Basic Tailwind CSS with React MCQs

1

Tailwind CSS is:

AUtility-first CSS framework

BJavaScript state library

CRouter

DDatabase

Explanation: Compose styles with class names like flex, p-4.

2

Install Tailwind in Vite React via:

Atailwindcss postcss autoprefixer config

Bnpm install react only

Cdelete CSS

Djquery

Explanation: Follow Tailwind + Vite setup docs.

3

className in React with Tailwind:

AApplies utility classes to element

BReplaces useState

CIs hook

DOnly for tests

Explanation: className="bg-blue-500 text-white".

4

Responsive prefix md: means:

AStyles apply at medium breakpoint and up

BMobile only

CDelete styles

DDark mode only

Explanation: Mobile-first breakpoints in Tailwind.

5

hover: prefix applies styles:

AOn mouse hover

BOn mount only

CIn SSR only

DNever

Explanation: State variants prefix utilities.

6

@tailwind directives go in:

AMain CSS input file

Bpackage.json

Cindex.html only

Drouter config

Explanation: @tailwind base; components; utilities;

7

flex items-center justify-between creates:

AFlexbox row with vertical center and space-between

BGrid only

CTable

DAnimation

Explanation: Common layout utilities.

8

dark: variant requires:

AdarkMode config (class or media)

BNo config

CRedux

DRouter

Explanation: Toggle dark class or use media strategy.

9

Purging/content config in Tailwind 3+:

AScans files to remove unused CSS in production

BDeletes components

CRemoves React

DAdds all CSS always

Explanation: content: ['./index.html', './src/**/*.{js,jsx}']

10

Arbitrary value syntax bg-[#1da1f2]:

AOne-off custom value in class

BInvalid in Tailwind

CReplaces theme

DSQL injection

Explanation: Square brackets for custom values.

10 Advanced Tailwind CSS with React MCQs

1

@apply in CSS files:

ACompose utilities into a custom class

BReplace React

CRun JavaScript

DDisable purge

Explanation: Use sparingly—prefer utilities in JSX.

2

clsx or cn utility helps:

AConditionally join class names

BFetch API

CRoute pages

DStore Redux state

Explanation: Merge tailwind classes without conflicts.

3

tailwind-merge solves:

AConflicting utility classes when merging

Bnpm errors

CHook order

DKeys

Explanation: Later class wins for same property.

4

Component libraries like shadcn/ui use:

ATailwind + Radix primitives

BOnly inline styles

CBootstrap only

DNo React

Explanation: Copy-paste Tailwind components.

5

JIT engine in Tailwind 3:

AGenerates styles on demand from class names

BPreloads all CSS ever

CDisables purge

DRequires jQuery

Explanation: Fast builds with on-demand utilities.

6

group-hover: applies when:

AParent with group class is hovered

BChild always hovered

CPage loads

DRedux updates

Explanation: Parent-child interactive styling.

7

Extending theme in tailwind.config:

AAdds custom colors, fonts, spacing

BRemoves breakpoints

CBreaks React

DOnly JS

Explanation: theme.extend section for design tokens.

8

CSS modules vs Tailwind in React:

ATailwind uses utility classes; CSS modules scope class names

BIdentical

CCannot combine

DTailwind bans JSX

Explanation: Teams may use both for different needs.

9

Accessibility with Tailwind:

AStill need semantic HTML and ARIA—utilities don't replace a11y

BAutomatic WCAG

CNo focus styles possible

DRemoves labels

Explanation: Use focus: ring utilities and proper markup.

10

Production CSS size with Tailwind:

ASmall due to purging unused utilities

BEntire bootstrap size always

CZero bytes

DUnlimited

Explanation: Only shipped classes used in content paths.

15 Tailwind CSS with React Interview Questions & Answers

Easy Medium Hard

1What is utility-first CSS?easy

Answer: Many single-purpose classes composed in markup instead of writing custom CSS files.

2How use Tailwind in React?easy

Answer: Add className strings with utility classes; configure Tailwind in project.

3Mobile-first breakpoints?medium

Answer: Unprefixed utilities apply to all; sm/md/lg/xl add min-width rules.

4How enable dark mode?medium

Answer: Configure darkMode: 'class' and toggle dark on html/body.

5What is content/purge configuration?medium

Answer: Tells Tailwind which files to scan for class names in production build.

6clsx + tailwind-merge pattern?hard

Answer: Build conditional class strings without conflicting duplicates.

7Pros of Tailwind with React?medium

Answer: Fast UI development, consistent design tokens, small production CSS.

8Cons or tradeoffs?medium

Answer: Verbose className strings; learning curve; HTML can look crowded.

9@apply when to use?hard

Answer: Extract repeated patterns; avoid over-abstracting early.

10Tailwind with component extraction?medium

Answer: Create React components wrapping repeated utility combos.

11Customize brand colors?easy

Answer: Extend theme.colors in tailwind.config.js.

12Focus visible styles?medium

Answer: Use focus:outline-none focus:ring-2 utilities for keyboard focus.

13Tailwind vs styled-components?hard

Answer: Tailwind utilities in className; styled-components CSS-in-JS—team preference.

14Vite + Tailwind v4 note?hard

Answer: Newer setups may use @import 'tailwindcss'—follow version docs.

15Accessible buttons with Tailwind?medium

Answer: Use semantic button, contrast, focus ring, and disabled:opacity-50.

Tailwind CSS in React

Table of Contents