Tailwind with React components

Introduction

Tailwind helps you style React components quickly using ready-made classes. It keeps your design consistent and your code clean.

You want to style buttons, cards, or layouts in React without writing custom CSS.

You want to build responsive designs that look good on phones and computers.

You want to keep your styles inside your React components for easy maintenance.

You want to use utility classes to speed up styling without leaving your JSX.

You want to create reusable styled components with minimal CSS.

Syntax

Tailwind

function Component() {
  return (
    <div className="bg-blue-500 text-white p-4 rounded">
      Hello, Tailwind in React!
    </div>
  );
}

Use className instead of class in React to add Tailwind classes.

Write Tailwind utility classes as a string inside className.

Examples

A green button that changes shade when hovered.

Tailwind

function Button() {
  return <button className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Click me</button>;
}

A centered card with shadow and padding.

Tailwind

function Card() {
  return (
    <div className="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
      <div className="p-4">
        <h2 className="text-xl font-semibold">Card Title</h2>
        <p className="text-gray-700 mt-2">This is a simple card styled with Tailwind.</p>
      </div>
    </div>
  );
}

Padding changes on medium screens and larger.

Tailwind

function ResponsiveBox() {
  return <div className="bg-purple-400 p-6 md:p-12 text-white">Resize the window to see padding change.</div>;
}

Sample Program

This example shows a simple card styled with Tailwind inside a React component. It uses React's createElement to build the component and Tailwind classes for styling.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tailwind with React Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body class="bg-gray-100">
  <div id="root"></div>
  <script type="text/javascript">
    const e = React.createElement;

    function App() {
      return e('div', {className: 'max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mt-10'},
        e('div', {className: 'md:flex'},
          e('div', {className: 'p-8'},
            e('div', {className: 'uppercase tracking-wide text-sm text-indigo-500 font-semibold'}, 'React + Tailwind'),
            e('h1', {className: 'block mt-1 text-lg leading-tight font-medium text-indigo-900'}, 'Hello Tailwind!'),
            e('p', {className: 'mt-2 text-gray-500'}, 'This card is styled using Tailwind CSS inside a React component.')
          )
        )
      );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(e(App));
  </script>
</body>
</html>

Important Notes

Always use className in React, not class.

Tailwind classes can be combined to create complex styles quickly.

Use responsive prefixes like md: to change styles on different screen sizes.

Summary

Tailwind lets you style React components using utility classes inside className.

It helps build consistent, responsive designs fast without writing custom CSS files.

Remember to use React's className attribute and combine Tailwind classes as needed.

Practice

1. What is the main way to add Tailwind styles to a React component?

easy

A. Add Tailwind classes inside a css file only

B. Write styles inside a style tag in the component

C. Use the className attribute with Tailwind utility classes

D. Use inline styles with JavaScript objects

Solution

1. Step 1: Understand React styling

   React uses the className attribute to add CSS classes to elements.

2. Step 2: Apply Tailwind classes

   Tailwind utility classes are added inside className to style components quickly.

3. Final Answer:

   Use the className attribute with Tailwind utility classes -> Option C

4. Quick Check:

   Tailwind + React = className [OK]

Hint: Remember: Tailwind classes go inside className in React [OK]

Common Mistakes:

• Using style attribute instead of className
• Trying to add Tailwind classes in CSS files only
• Using class instead of className in JSX

2. Which of the following is the correct syntax to add Tailwind classes to a React button component?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Use JSX syntax for className

   In React JSX, the attribute for CSS classes is className, not class.

2. Step 2: Provide classes as a string

   The value of className must be a string, so it should be inside quotes.

3. Final Answer:

   <button className="bg-blue-500 text-white p-2">Click me</button> -> Option D

4. Quick Check:

   className="..." is correct JSX syntax [OK]

Hint: Use className="..." with quotes for Tailwind classes [OK]

Common Mistakes:

• Using class instead of className
• Not quoting the className value
• Using curly braces without quotes for className string

3. What will be the visual result of this React component?

function Card() {
  return (
    <div className="max-w-sm mx-auto bg-white rounded shadow-lg p-4">
      <h2 className="text-xl font-bold mb-2">Hello</h2>
      <p className="text-gray-700">Welcome to Tailwind!</p>
    </div>
  );
}

medium

A. A red box with large text and no margin

B. A centered white card with rounded corners, shadow, padding, and text styled with bold heading and gray paragraph

C. A full-width blue box with no padding and default text styles

D. An unstyled div with plain text

Solution

1. Step 1: Analyze container styles

   The div uses max-w-sm (small max width), mx-auto (center horizontally), bg-white (white background), rounded (rounded corners), shadow-lg (large shadow), and p-4 (padding).

2. Step 2: Analyze text styles

   The heading has text-xl (large text), font-bold (bold), and mb-2 (margin bottom). The paragraph uses text-gray-700 (medium gray text).

3. Final Answer:

   A centered white card with rounded corners, shadow, padding, and text styled with bold heading and gray paragraph -> Option B

4. Quick Check:

   Tailwind classes produce styled card = A [OK]

Hint: Read each Tailwind class meaning to visualize output [OK]

Common Mistakes:

• Ignoring mx-auto for centering
• Confusing bg-white with colored backgrounds
• Missing padding or shadow effects

4. Identify the error in this React component using Tailwind:

function Button() {
  return <button class="bg-green-500 text-white p-3">Submit</button>;
}

medium

A. Using class instead of className in JSX

B. Missing closing tag for button

C. Tailwind classes are invalid

D. Button text should be inside curly braces

Solution

1. Step 1: Check JSX attribute for CSS classes

   In React JSX, the attribute must be className, not class.

2. Step 2: Verify other syntax

   The button tag is properly closed and Tailwind classes are valid. Text inside button can be plain string.

3. Final Answer:

   Using class instead of className in JSX -> Option A

4. Quick Check:

   JSX requires className, not class [OK]

Hint: Always use className in React JSX for CSS classes [OK]

Common Mistakes:

• Using class instead of className
• Thinking Tailwind classes are invalid
• Adding unnecessary curly braces around text

5. You want a React component with a responsive button that is blue on small screens and green on medium and larger screens using Tailwind. Which is the correct className value?

<button className="?">Click</button>

hard

A. "bg-blue-500 md:bg-green-500 text-white p-2 rounded"

B. "bg-green-500 md:bg-blue-500 text-white p-2 rounded"

C. "bg-blue-500 bg-green-500 md:text-white p-2 rounded"

D. "text-white p-2 rounded bg-blue-500 bg-green-500"

Solution

1. Step 1: Understand Tailwind responsive prefixes

   Tailwind uses prefixes like md: to apply styles at medium screen sizes and above.

2. Step 2: Apply blue background by default and green on medium+

   Use bg-blue-500 for small screens and md:bg-green-500 to override on medium and larger.

3. Step 3: Check other classes

   Text color, padding, and rounding are consistent and correctly placed.

4. Final Answer:

   "bg-blue-500 md:bg-green-500 text-white p-2 rounded" -> Option A

5. Quick Check:

   Responsive prefix md: changes color on medium screens [OK]

Hint: Use md: prefix to change styles on medium screens up [OK]

Common Mistakes:

• Reversing colors for small and medium screens
• Placing classes in wrong order causing override issues
• Using multiple background colors without responsive prefixes