Install

npm install next react react-dom
npm install tailwindcss@3 postcss autoprefixer

# Will create tailwind.config.js and postcss.config.js
npx tailwindcss init -p

Set tailwind.config.js

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",

        // Or if using `src` directory:
        "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Set postcss.config.js

// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

Import Tailwind CSS

// ./pages/_app.jsx
import '../css/global.css';

/* ./css/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Test Tailwind CSS in React page

Code: HelloWorld.jsx

export default function HelloWorld() {
    return (
        <>
            <h1 className="text-red-300 underline italic">Hello world</h1>

            <div className="p-2 perspective-midrange bg-sky-700">
                <img src="https://placehold.co/150x100" 
                    className="rotate-[6.73deg]" />
            </div>

            <button className="m-2 size-15 rounded bg-cyan-500 shadow-lg shadow-cyan-500/50">Subscribe</button>

        </>
    )
}

Output

Hello world

Subscribe

Layout

• container: Centers and constrains content width responsively.
• block: Displays an element as a block, occupying full width.
• inline-block: Displays an element as an inline-level block.
• inline: Displays an element inline without a line break.
• hidden: Hides an element (display: none).

Flex & Grid

• flex: Sets display to flex, enabling flexbox layout.
• inline-flex: Displays as inline-flex.
• grid: Sets display to grid.
• inline-grid: Displays as inline-grid.
• items-start / items-center / items-end: Aligns flex/grid items vertically.
• justify-start / justify-center / justify-end / justify-between: Aligns items horizontally.
• gap-x-{n}, gap-y-{n}: Sets horizontal/vertical gap between grid/flex items.

Spacing

• p-{n}, px-{n}, py-{n}: Applies padding on all sides or axes.
• m-{n}, mx-{n}, my-{n}: Applies margin on all sides or axes.
• pt-{n}, pr-{n}, pb-{n}, pl-{n}: Individual side padding.
• mt-{n}, mr-{n}, mb-{n}, ml-{n}: Individual side margin.

Sizing

• w-{n}, w-full / w-screen / w-auto: Width utilities.
• min-w-{n}, max-w-{n}: Minimum/maximum width.
• h-{n}, h-full / h-screen / h-auto: Height utilities.
• min-h-{n}, max-h-{n}: Minimum/maximum height.

Typography

• text-xs / text-sm / text-base / text-lg / text-xl / text-2xl / text-3xl: Font sizes.
• font-thin / font-light / font-normal / font-medium / font-bold / font-extrabold: Font weights.
• italic: Italic text.
• uppercase: Uppercase text.
• underline: Underlined text.
• line-through: Struck-through text.
• text-left / text-center / text-right / text-justify: Text alignment.
• leading-tight / leading-normal / leading-relaxed: Line height.

Text Color

• text-{color}-{shade}: Sets text color (e.g., text-gray-700).

Background & Opacity

• bg-{color}-{shade}: Sets background color (e.g., bg-red-500).
• bg-opacity-{n}: Sets background opacity.

Borders & Radius

• border / border-2 / border-t / border-b / border-l / border-r: Border utilities.
• border-{color}-{shade}: Border color.
• rounded / rounded-sm / rounded-md / rounded-lg / rounded-full: Border radius.

Effects & Shadows

• shadow / shadow-sm / shadow-md / shadow-lg / shadow-xl: Box shadows.
• opacity-{n}: Sets element opacity.

Transitions

• transition / transition-colors / transition-opacity: Enable transitions.
• duration-{n}: Set transition duration.
• ease-linear / ease-in / ease-out / ease-in-out: Transition timing functions.

Position & Z-Index

• static / relative / absolute / fixed / sticky: Position utilities.
• inset-0 / inset-x-0 / inset-y-0 / top-{n} / right-{n} / bottom-{n} / left-{n}: Position offsets.
• z-{n}: Sets z-index.

Transform & Translate

• transform: Enables transform.
• scale-{n}: Scales element.
• rotate-{deg}: Rotates element.
• translate-x-{n} / translate-y-{n}: Moves element along axes.

Cursors & Pointer Events

• cursor-pointer / cursor-not-allowed: Cursor styles.
• pointer-events-none / pointer-events-auto: Pointer events.

Accessibility

• sr-only: Visually hidden, accessible to screen readers.
• not-sr-only: Reverts sr-only.

Custom Values

• text-[27px], w-[500px], bg-[#ff0000]: Use custom values within square brackets.

Responsive Design

• sm: Applies styles for small screens (min-width: 640px).
• md: Applies styles for medium screens (min-width: 768px).
• lg: Applies styles for large screens (min-width: 1024px).
• xl: Applies styles for extra-large screens (min-width: 1280px).
• 2xl: Applies styles for 2x extra-large screens (min-width: 1536px).

Dark Mode

• dark:bg-gray-800: Applies styles in dark mode.