Tailwind CSS is a utility-first CSS framework for creating fast, responsive, and custom designs. It allows developers to style elements by applying predefined classes directly in HTML, enabling rapid design iteration.
To get started with Tailwind CSS, you can use either a CDN or install it using npm. Here is an example of using the CDN approach:
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
Alternatively, if you're using npm:
npm install -D tailwindcss
npx tailwindcss init
Tailwind CSS is structured around utility classes. Each class represents a single CSS property, like bg-red-500 for background color or text-lg for text size.
Tailwind provides utilities to control the layout of elements using Flexbox. Here's an example:
<div class="flex justify-between">
<div class="p-4">Item 1</div>
<div class="p-4">Item 2</div>
<div class="p-4">Item 3</div>
</div>
Tailwind's grid system allows you to create complex layouts. Here's an example of a 2-column layout:
<div class="grid grid-cols-2 gap-4">
<div>Column 1</div>
<div>Column 2</div>
</div>
Tailwind provides a wide range of color utilities, such as bg-color, text-color, and border-color.
<div class="bg-blue-500 text-white p-4">This is a blue box</div>
Tailwind makes it easy to add margins and padding with utility classes like m-4 and p-4.
<div class="m-4 p-4">This box has margin and padding</div>
To adjust text size in Tailwind, use classes like text-xs, text-lg, and text-2xl.
<p class="text-xl">This is extra large text</p>
This is extra large text
Control the weight of text with classes like font-bold or font-light.
<p class="font-bold">This is bold text</p>
This is bold text
You can customize Tailwind's default configuration by editing the tailwind.config.js file.
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {
colors: {
'custom-blue': '#1e40af',
},
},
},
plugins: [],
};
This code allows you to add custom colors to the Tailwind palette.
Combine Tailwind with Sass or PostCSS to manage larger projects or extend functionality.
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Make sure to set up your build process using npm and configure Tailwind with a build tool like Webpack.
Responsive design allows your website to adjust to different screen sizes. Tailwind comes with built-in breakpoints like sm, md, lg, and xl.
<div class="text-sm md:text-lg">This text is small on mobile, large on tablets and above</div>
Explanation: This element will have small text on mobile and larger text on devices with a width of 768px or more (tablet and above).
Tailwind makes it easy to create responsive grids. You can use the grid-cols-{n} class for controlling the number of columns at different breakpoints.
<div class="grid grid-cols-2 md:grid-cols-4">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
</div>
Tailwind provides pseudo-classes like hover: to apply styles when the user hovers over an element.
<button class="bg-blue-500 hover:bg-blue-700 text-white p-2">Hover me</button>
Explanation: This button will have a blue background by default, but when hovered, it changes to a darker blue.
Similarly, you can add focus effects using the focus: class. This is often used for form fields.
<input class="focus:ring-2 focus:ring-blue-500 p-2">
Explanation: When the input field is focused, a blue ring will appear around it.
Use Tailwind's transition utilities to create smooth transitions for various properties like color, background-color, or transform.
<button class="bg-red-500 hover:bg-green-500 transition-colors duration-300">Click me</button>
Explanation: The button smoothly transitions from red to green when hovered, and the transition duration is set to 300ms.
Transformations like scaling and rotating can also be animated using Tailwind's transition utilities.
<div class="transform hover:scale-110 transition-transform duration-300">Hover to scale</div>
Explanation: When the element is hovered, it will scale up by 10% smoothly over 300ms.
Tailwind makes it easy to style form elements like inputs, textareas, and buttons.
<input class="border-2 border-gray-300 p-2">
Explanation: The input will have a 2px border with a light gray color and padding.
With Tailwind, you can easily style select dropdowns by applying utilities.
<select class="bg-white border-2 border-gray-300 p-2">
<option>Option 1</option>
<option>Option 2</option>
</select>
Explanation: The select dropdown will have a white background, 2px border, and padding.
You can extend Tailwind's default configuration in tailwind.config.js to add custom utilities, themes, and plugins.
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#1e40af',
},
},
},
plugins: [],
};
Explanation: This code extends Tailwind's color palette to include a custom blue color.
Custom utilities can be created by adding them in the extend section of the configuration.
module.exports = {
theme: {
extend: {},
},
plugins: [
function({ addUtilities }) {
addUtilities({
'.text-shadow': {
textShadow: '2px 2px 5px rgba(0, 0, 0, 0.15)',
},
});
},
],
};
Explanation: This adds a custom utility for text shadow, which can now be used like text-shadow in HTML.
Flexbox is a powerful tool for creating flexible and responsive layouts. Tailwind provides classes like flex, flex-row, and flex-col to control the direction of your flex container.
<div class="flex flex-row">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Explanation: This layout arranges items horizontally. To stack them vertically, use flex-col instead of flex-row.
Use justify-start, justify-center, justify-between, etc., to control how items are distributed along the main axis.
<div class="flex justify-between">
<div>Left</div>
<div>Center</div>
<div>Right</div>
</div>
Explanation: Items are evenly spaced with space between them. This uses the justify-between class.
Tailwind comes with a large set of predefined colors. You can use them directly by applying the relevant class like bg-blue-500 or text-red-600.
<div class="bg-blue-500 text-white p-4">Blue Background</div>
Explanation: This div will have a blue background and white text. You can easily change the color by changing the class.
You can define custom colors in the tailwind.config.js file by extending the theme.
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#1e3a8a',
},
},
},
};
Explanation: This custom color, brand-blue, can now be used throughout the project.
Tailwind provides utility classes for text size, weight, line height, and alignment. You can customize these using classes like text-lg, font-bold, and text-center.
<div class="text-xl font-bold text-center">This is a centered heading</div>
Explanation: This text will be large, bold, and centered on the page.
In the tailwind.config.js file, you can extend the default fonts by adding custom fonts in the theme section.
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Nunito', 'Arial', 'sans-serif'],
},
},
},
};
Explanation: This code customizes the sans font to use the "Nunito" font, and it falls back to Arial and sans-serif if necessary.
Tailwind provides classes for basic animations, including the ability to animate elements on hover or focus.
<div class="transition-transform transform hover:scale-110">Hover to enlarge</div>
Explanation: This element will scale up by 10% when hovered, with a smooth transition effect.
You can create more complex animations using keyframes. For example, you can add a "bounce" animation to an element.
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
module.exports = {
theme: {
extend: {
animation: {
bounce: 'bounce 1s infinite',
},
},
},
};
Explanation: This code creates a "bounce" animation that will cause an element to move up and down.
Tailwind’s grid system is simple and flexible. Use grid to create a grid container, and grid-cols-{n} to define the number of columns.
<div class="grid grid-cols-3 gap-4">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
Explanation: This layout creates a grid with 3 equal-width columns. The gap-4 class adds spacing between the columns.
The grid-flow-{direction} class can be used to control the flow of grid items. You can set the flow to either row or column.
<div class="grid grid-cols-3 grid-flow-row">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Explanation: This layout uses a row-based flow. If the items exceed the number of columns, they will be placed in the next row.
Tailwind's responsive design utilities enable you to build layouts that adjust for different screen sizes. You can add responsive classes to modify styles based on the screen size.
<div class="text-center sm:text-left">This text is centered on small screens, left-aligned on larger screens.</div>
Explanation: The sm:text-left class applies left alignment on small screens and above, while text-center applies the center alignment on smaller screens.
With Tailwind, you can use grid systems and modify the number of columns based on the screen size.
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Explanation: On smaller screens, there will be 1 column, on medium-sized screens 2 columns, and 3 columns on larger screens.
Tailwind CSS allows you to apply styles for hover, focus, and other state-based events using variant prefixes like hover: and focus:.
<button class="bg-blue-500 hover:bg-blue-700 text-white">Hover to Change Color</button>
Explanation: This button will have a blue background, and when hovered, the background color will change to a darker blue.
You can also style elements when they are in an active or disabled state using active: and disabled:.
<button class="bg-gray-500 active:bg-gray-700 disabled:bg-gray-300">Active/Disabled Button</button>
Explanation: The button will have different background colors when clicked or disabled.
Tailwind offers a set of classes for styling form controls like inputs, selects, and textareas. You can apply padding, borders, and focus states easily.
<input type="text" class="p-2 border-2 border-gray-300 focus:border-blue-500">
Explanation: The input field has padding, a light gray border, and changes to a blue border when focused.
Tailwind can be used to style select menus and other form controls with utility classes.
<select class="p-2 border-2 border-gray-300 focus:border-blue-500">
<option>Option 1</option>
<option>Option 2</option>
</select>
Explanation: This select element has similar styles to the input field, with padding and a border that changes color on focus.
Tailwind provides simple utilities to apply transitions on properties such as color, opacity, and transform.
<div class="transition duration-500 ease-in-out transform hover:scale-110">Hover to Scale</div>
Explanation: This element will smoothly transition to a scaled-up size when hovered. The transition duration is set to 500ms.
Use transition-opacity to animate opacity changes smoothly.
<div class="transition-opacity opacity-0 hover:opacity-100">Hover to Fade In</div>
Explanation: Initially, the element is transparent (opacity-0) and becomes fully visible (opacity-100) when hovered.
Tailwind allows you to extend its functionality with plugins. To install a plugin, you can use npm or yarn, and then configure it in the tailwind.config.js file.
npm install @tailwindcss/forms
Explanation: This command installs the official forms plugin that provides additional form control styles.
Once installed, you can add the plugin to your tailwind.config.js file.
module.exports = {
plugins: [
require('@tailwindcss/forms'),
],
};
Explanation: This configuration enables the plugin's functionality, which will now be available in your Tailwind project.
Tailwind allows you to extend its color palette by adding custom colors in the tailwind.config.js file.
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#0077ff',
'custom-orange': '#ff7700',
},
},
},
};
Explanation: This will add two new colors, custom-blue and custom-orange, to the color palette, which can be used like any other color class.
You can also customize the spacing values for padding, margin, and other spacing utilities.
module.exports = {
theme: {
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
},
},
};
Explanation: This extends the default spacing scale, allowing you to use p-128 or m-144 in your project.
With Tailwind, you can easily integrate custom fonts by modifying the fontFamily property in the configuration file.
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'Arial', 'sans-serif'],
serif: ['Georgia', 'Cambria', 'serif'],
},
},
},
};
Explanation: This example adds Inter to the default sans font family and Georgia to the default serif font family.
Tailwind allows you to define custom utilities in the configuration file, providing additional styling options.
module.exports = {
theme: {
extend: {},
},
plugins: [
function({ addUtilities }) {
addUtilities({
'.rotate-15': { transform: 'rotate(15deg)' },
}, ['responsive', 'hover']);
},
],
};
Explanation: This adds a new utility class rotate-15 that rotates an element by 15 degrees, which can be used responsively and on hover.
Tailwind allows you to define custom animations with keyframes by extending the configuration file.
module.exports = {
theme: {
extend: {
animation: {
'spin-slow': 'spin 3s linear infinite',
},
},
},
};
Explanation: This defines an animation called spin-slow that spins an element in a slow motion. The animation lasts 3 seconds and repeats infinitely.
Once the animations are defined, you can apply them to your HTML elements using the animation utility classes.
<div class="animate-spin-slow">Spinning Content</div>
Explanation: This applies the custom spin-slow animation to the element, making it spin slowly.
Tailwind provides utilities to enhance accessibility, like focus:outline-none and aria attributes.
<button class="focus:outline-none">Accessible Button</button>
Explanation: The focus:outline-none class removes the default focus outline but can be replaced with a custom outline if needed to maintain accessibility.
Use aria-* attributes to make your components more accessible to screen readers.
<button aria-label="Close">Close Button</button>
Explanation: The aria-label attribute helps screen readers by providing a label for the button that might not be visually clear.
When using Tailwind, it’s essential to structure your project files efficiently. A common setup involves separating concerns like components, layouts, and utilities.
src/
components/
button.css
card.css
layouts/
grid.css
utilities/
typography.css
Explanation: This structure organizes your styles into meaningful folders based on their role in the design.
In production, it's important to use PurgeCSS to remove unused styles and keep your CSS file size small. Tailwind integrates well with PurgeCSS by specifying paths to all your templates.
module.exports = {
purge: ['./src/**/*.{html,js}'],
darkMode: 'media',
theme: {},
variants: {},
plugins: [],
};
Explanation: This configuration will purge any unused styles from the CSS file, reducing its size for production.
Tailwind provides responsive design utilities that allow you to adjust the layout based on different screen sizes.
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-4">
<div class="col-span-2">Content 1</div>
<div class="col-span-2">Content 2</div>
</div>
Explanation: This layout will display 2 columns on small screens and 4 columns on larger screens.
Tailwind comes with built-in breakpoints, but you can customize them as needed in your tailwind.config.js file.
module.exports = {
theme: {
screens: {
'xs': '475px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
},
};
Explanation: This configuration allows you to customize the screen breakpoints to suit your design needs.
Tailwind’s Flexbox utilities allow you to create flexible layouts quickly. Here's how to create a simple flexbox container.
<div class="flex">
<div class="flex-1">Flex Item 1</div>
<div class="flex-1">Flex Item 2</div>
<div class="flex-1">Flex Item 3</div>
</div>
Explanation: The flex class turns the container into a flex container, and the flex-1 class makes each child element take up equal space.
You can align items within a flex container using Tailwind’s alignment utilities.
<div class="flex items-center">
<div>Item 1</div>
<div>Item 2</div>
</div>
Explanation: The items-center class vertically aligns the flex items within the container.
Tailwind’s grid system makes it easy to create multi-column layouts. Below is an example of a basic grid layout.
<div class="grid grid-cols-3">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
</div>
Explanation: The grid class activates grid layout, and grid-cols-3 defines the number of columns in the grid.
Tailwind allows you to customize grid items, such as defining which item spans multiple columns.
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2">Item Spanning 2 Columns</div>
<div>Item 1</div>
<div>Item 2</div>
</div>
Explanation: The col-span-2 class makes the first item span two columns in the grid.
Tailwind provides utilities to control typography such as font size, line height, font weight, and more.
<p class="text-lg font-medium">This is a medium-sized text</p>
<p class="text-sm font-light">This is a small text</p>
Explanation: The text-lg and text-sm classes set the text size, while font-medium and font-light adjust the font weight.
To adjust the space between lines of text, use the leading utility class in Tailwind.
<p class="leading-loose">This paragraph has loose line height.</p>
<p class="leading-tight">This paragraph has tight line height.</p>
Explanation: The leading-loose class increases the line height, while leading-tight decreases the space between lines.
In JIT mode, Tailwind generates only the CSS you use in your HTML, improving performance and reducing the file size.
module.exports = {
mode: 'jit',
purge: ['./src/**/*.{html,js}'],
theme: {},
plugins: [],
};
Explanation: Enabling JIT mode allows Tailwind to generate only the necessary CSS based on your HTML classes, optimizing the final output.
The @apply directive allows you to apply Tailwind utility classes directly within your custom CSS.
.button {
@apply py-2 px-4 bg-blue-500 text-white rounded-md;
}
Explanation: The @apply directive combines multiple Tailwind utility classes into a single custom class.
You can extend Tailwind's default theme by adding custom configurations in the tailwind.config.js file.
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#007BFF',
},
},
},
};
Explanation: This example extends the default color palette to include a custom color called brand-blue.
You can also modify Tailwind's spacing and size utilities by extending them in the configuration file.
module.exports = {
theme: {
extend: {
spacing: {
'128': '32rem',
},
},
},
};
Explanation: The spacing property is extended to allow a custom size of 32rem for classes like mt-128, mb-128, etc.
Tailwind makes it easy to style forms using utility classes for input fields, labels, and buttons.
<form class="space-y-4">
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" id="name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
<button type="submit" class="w-full py-2 px-4 bg-blue-500 text-white rounded-md">Submit</button>
</form>
Explanation: Utility classes like mt-1, block, and w-full style the form elements and ensure they are properly spaced.
Tailwind allows you to customize form controls such as select boxes, checkboxes, and radio buttons.
<select class="block w-full py-2 px-4 border rounded-md">
<option>Option 1</option>
<option>Option 2</option>
</select>
Explanation: The block, w-full, and rounded-md classes style the select box to be full-width and rounded.
Tailwind provides transition utilities that make it easy to add animations and transitions to your elements.
<div class="transition-all duration-300 ease-in-out transform hover:scale-110">
Hover me!
</div>
Explanation: The transition-all class enables transition for all properties, and hover:scale-110 scales the element on hover.
Tailwind allows you to create keyframe animations using the @keyframes directive in your custom CSS.
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
<div class="animate-bounce">
Bounce Animation!
</div>
Explanation: The animate-bounce class applies a bouncing animation to the element.
Tailwind allows you to extend its functionality using custom plugins. Here’s how you can add the typography plugin.
npm install @tailwindcss/typography
module.exports = {
plugins: [
require('@tailwindcss/typography'),
],
};
Explanation: This example demonstrates how to install and configure a plugin for typography to handle rich text styling.
You can also create your own Tailwind plugins to extend the framework with your own utilities.
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.rotate-15': { transform: 'rotate(15deg)' },
});
}),
],
};
Explanation: In this example, a custom plugin adds a rotate-15 class to apply a 15-degree rotation.
Tailwind lets you define a custom theme using the extend property in the tailwind.config.js file.
module.exports = {
theme: {
extend: {
colors: {
'dark-mode': '#1a202c',
},
},
},
};
Explanation: This example extends the color palette to include a custom dark-mode color.
You can easily implement a theme switcher using Tailwind’s dark mode support.
<div class="bg-white dark:bg-dark-mode">
This element changes color based on the theme.
</div>
Explanation: The dark:bg-dark-mode class applies the custom dark-mode background color when dark mode is enabled.
Tailwind CSS offers utility classes for creating animations and transitions, making it easy to add dynamic effects to elements.
<div class="animate-pulse">
This element pulses.
</div>
Explanation: The animate-pulse class applies a pulsing animation that gradually fades in and out the element.
You can create custom animations by extending Tailwind's configuration file.
<div class="animate-bounce">
This element bounces.
</div>
Explanation: The animate-bounce class adds a bouncing effect to the element.
Transitions in Tailwind make it easy to apply smooth changes when properties like colors, spacing, or transforms change.
<button class="transition duration-300 ease-in-out transform hover:scale-110">
Hover Me
</button>
Explanation: The transition class enables transitions, duration-300 specifies a 300ms duration, and hover:scale-110 makes the button scale up on hover.
Tailwind also allows you to customize the transition's behavior, like delay and easing.
<div class="transition-all duration-500 ease-out hover:bg-blue-500">
Hover Me to Change Color
</div>
Explanation: transition-all applies transitions to all properties, duration-500 specifies a 500ms duration, and ease-out creates a smooth transition effect.
Shadows add depth to elements, and Tailwind provides several shadow utilities for various effects.
<div class="shadow-lg">
This element has a large shadow.
</div>
Explanation: The shadow-lg class adds a large shadow around the element, creating depth.
Shadows can be customized by adjusting their color, opacity, and offset.
<div class="shadow-xl shadow-blue-500/50">
This element has a customized shadow.
</div>
Explanation: The shadow-xl class applies an extra-large shadow, while shadow-blue-500/50 customizes the shadow color and transparency.
Tailwind allows you to extend the default configuration to create custom utilities.
/* In tailwind.config.js */
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#1DA1F2',
},
},
},
}
Explanation: This code in the tailwind.config.js file extends Tailwind's default color palette by adding a custom blue color.
You can also modify Tailwind's default theme settings, such as spacing, colors, and fonts.
/* In tailwind.config.js */
module.exports = {
theme: {
fontFamily: {
'custom': ['"Comic Sans MS"', 'cursive'],
},
},
}
Explanation: This customizes the font family, adding a new custom font that uses "Comic Sans MS".