Â
Tailwind 3 basic
Setup verison 3
- Version 3: https://v3.tailwindcss.com/docs/guides/nextjs
Install
npm install next react react-dom
npm install -D tailwindcss@3 postcss autoprefixer
# Will create tailwind.config.js and postcss.config.js
npx tailwindcss init -p
Set tailwind.config.js
// postcss.config.mjs
/** @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
// 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>
</>
)
}
Hello world
Tailwind 3 Basic Classes
- https://v3.tailwindcss.com/docs/
Below are commonly used Tailwind CSS classes grouped by category, with simple explanations:
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: Revertssr-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.
Example Usage
export default function Example() {
return (
<div className="container mx-auto p-4">
<h1 className="text-3xl font-bold text-center mb-4">
Tailwind CSS Example
</h1>
<div className="flex justify-between items-center mb-4">
<div className="w-1/3 p-2 bg-blue-100 rounded shadow">
<p className="text-gray-700">Flex Item 1</p>
</div>
<div className="w-1/3 p-2 bg-green-100 rounded shadow">
<p className="text-gray-700">Flex Item 2</p>
</div>
<div className="w-1/3 p-2 bg-red-100 rounded shadow">
<p className="text-gray-700">Flex Item 3</p>
</div>
</div>
<div className="grid grid-cols-3 gap-4">
<div className="p-4 bg-yellow-100 rounded shadow">
<p className="text-gray-700">Grid Item 1</p>
</div>
<div className="p-4 bg-purple-100 rounded shadow">
<p className="text-gray-700">Grid Item 2</p>
</div>
<div className="p-4 bg-pink-100 rounded shadow">
<p className="text-gray-700">Grid Item 3</p>
</div>
</div>
</div>
);
}
Tailwind CSS Example
Flex Item 1
Flex Item 2
Flex Item 3
Grid Item 1
Grid Item 2
Grid Item 3