What is Tailwind with React components?

Tailwindmarkup~7 mins

Tailwind with React components

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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>

OutputSuccess

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.