Introduction to Tailwind CSS
Tailwind CSS is a utility-first CSS framework that provides a robust set of pre-designed classes directly in your markup. Unlike traditional CSS frameworks like Bootstrap, which provide pre-built components (buttons, cards, alerts), Tailwind embraces utility classes like text-center, mt-4, and flex that help you style your application without needing to write custom CSS.
Why Tailwind?
It's designed to make your development process feel like building with Lego bricks, leveraging composable and reusable classes to craft your design system swiftly.
Key Features:
- Utility-First: Tailwind is all about utility classes. These low-level and highly reusable classes allow you to build complex designs without ever opening a CSS file.
- Customization: Tailwind gives you the power to customize it extensively. Modify variables to match your design system or extend it with plugins.
- Consistent and Maintainable: By sticking to utility classes, your codebase becomes more consistent and easier to maintain. No more hunting down mysteriously named classes in your CSS files.


Who Can Benefit from Tailwind?
Tailwind is versatile and can be used by a wide range of developers:
- Developers: Quickly prototype and build visually appealing interfaces..
- Full-Stack Developers: Integrate consistent design systems directly into your projects without needing a dedicated front-end designer.
- Designers: Convert designs into live prototypes without having to fight with custom CSS.
- Teams: Standardize your design language across your application, ensuring that everyone is following the same rules.
Advantages of Tailwind CSS:
- Speed of Development: Tailwind boosts your speed as it eliminates the need to write custom CSS. You can rapidly build complex UIs using pre-existing classes.
- Consistency: Using utility classes ensures that your design remains consistent throughout your application.
- Responsive Design: Tailwind makes it straightforward to create responsive designs. Its approach to handling breakpoints and screen sizes is intuitive and powerful.
- Maintainability: Since styles are applied directly in your markup, maintaining CSS becomes much more manageable. You won't need to pay attention to overarching CSS files that might conflict or become unwieldy.
- Customization: Tailwind's configuration file enables extensive customization. You can adjust the default theme, add new utilities, change breakpoints, and more.

This documentation template serves as a comprehensive guide for developers to understand the setup configuration and functionalities of the project. We are going to build the Documentation Template using Tailwind CSS.
What is Tailwind CSS
Tailwind CSS is an open-source CSS framework that lets you style websites in HTML without external CSS
Tailwind CSS is a utility-first CSS framework that simplifies web development by providing a set of pre-designed utility classes. These utility classes enable you to build custom designs without writing any custom CSS, promoting consistency, scalability, and efficiency.
No custom CSS
You can create custom component designs without leaving your HTML or writing custom CSS.
Quick changes
You can easily adjust your design without deep coding.
Simplifies web design
Tailwind CSS simplifies web design for beginners and experienced developers alike.

Why Use Tailwind CSS?
Tailwind CSS offers a faster UI-building process by allowing you to utilize utility classes directly in their HTML, eliminating the need for custom styles. Here's why Tailwind CSS stands out:
Utility-first approach:
Tailwind allows custom designs without writing custom CSS, making the development process more streamlined.
Responsive by default:
Tailwind simplifies the creation of responsive designs with built-in utility classes.
Granular control:
It offers extensive control over your design, enabling precise customization and faster prototyping.
Get started with Tailwind CSS
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
It's fast, flexible, and reliable — with zero-runtime.
Install Tailwind CSS
Install tailwindcss
via npm, and create your
tailwind.config.js file.
- npm install -D tailwindcss
- npx tailwindcss init
Configure your template paths
Add the paths to all of your template files in your
tailwind.config.js
file.
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
change into config file
Open the tailwind.config.js file and add * into the content array like this:
module.exports = {
content: ["*"]
}
change into config file
Make changes in the package.json file to set up an auto server start. Modify the scripts section as follows:
"script" : {
"start" : "vite"
}
Start using Tailwind in your HTML
Add your compiled CSS file to the head
and
start
using
Tailwind’s utility classes to style your content.
In your src/index.html , add the following structure:
What is the base layer?
The base layer in Tailwind CSS is like a clean slate for your designs. It resets all the default browser styles, ensuring consistency across different browsers and devices. This includes setting default typography rules like font sizes, headings, paragraphs, and links.
In essence, the base layer provides a solid and uniform foundation on which you can build your custom styles without worrying about unexpected browser-specific behaviors.
- Consistent Styling: The base layer resets any browser-specific default styling. This helps to achieve a more consistent look across different environments.
- Typography: It typically includes basic typographic styles, like setting uniform font sizes, line heights, and font families for elements like h1, p, and a.
- Development Ease: Provides a seamless foundation for developers to build upon, reducing the need for extensive custom base styles.
Essentially, while you can style elements directly using Tailwind’s utility classes, the base layer ensures a solid starting point for a cohesive UI.
The base layer usually includes styles like:
@layer base {
html {
font-family: 'Inter', sans-serif;
line-height: 1.5;
}
body {
margin: 0;
padding: 0;
color: #333;
}
}
Explanation:
- @layer base: Adds your custom styles to the base layer.
- @apply: Allows you to use Tailwind's utility classes within CSS for styling.
Example of Using Base Styles
With the above customization, when you use an or tag in your HTML, the specified styles are applied:
Example 3: Overriding Default Tailwind Base Styles
If you want to modify Tailwind's default base styles (e.g., the styles applied to
), you can directly target those elements:Key Features of Tailwind Components:
Tailwind Components are reusable UI elements or patterns built using the utility-first CSS framework Tailwind CSS. Tailwind provides low-level utility classes (e.g., bg-blue-500, text-center, p-4), and developers use these classes to create pre-designed and reusable components for consistent styling across a project.
- Utility-First: They use Tailwind’s utility classes to achieve specific designs without writing custom CSS.
- Customizable: UYou can easily tweak these components by changing or adding utility classes.
- Consistency: Tailwind ensures uniform design across the app by relying on the same design tokens (colors, spacing, etc.) defined in the Tailwind configuration.
- Reusability: Once built, a component can be reused across multiple pages or projects, saving development time.
Examples of Tailwind Components:
- Buttons: Interactive elements with hover, focus, and active states.
- Cards: Structured containers for content (e.g., blog posts, product info).
- Navbars: Header menus with links and dropdowns.
- Forms: Input fields, checkboxes, radio buttons, and submission areas.
- Modals:Pop-up boxes for alerts or additional content.
- Alerts: Notifications or status messages.
1. Card Components
2. Navbar Components
3. Modal Component
4. Hero Section
5. Alert Component
What Are Tailwind Utilities?
Tailwind Utilities are the fundamental building blocks of the Tailwind CSS framework. They are low-level, single-purpose CSS classes designed to perform specific styling tasks, such as setting a color, padding, margin, flex behavior, typography, and more. By combining these utilities, you can create custom designs without writing any CSS manually.
1. Text and Font Utilities
- text-gray-700: Sets the text color to gray with shade 700.
- Cards: Structured containers for content (e.g., blog posts, product info).
- font-bold: Applies bold font weight.
- text-xl: Sets the font size to extra-large.
Example
2. Background Utilities
- bg-blue-500: Sets the background color to blue with shade 500.
- bg-opacity-50: Sets the background opacity to 50%.
Example
3. Spacing Utilities
- p-4: Adds padding of 1rem (16px) on all sides.
- mt-2: Adds a margin of 0.5rem (8px) to the top.
- space-x-4: Adds horizontal spacing of 1rem (16px) between children.
Example
4. Flexbox Utilities
- flex: Applies a flex container.
- justify-center: Centers items horizontally.
- items-center: Centers items vertically.
Example
5. Grid Utilities
- grid: Creates a grid container.
- grid-cols-3: Defines a grid with 3 columns.
- gap-4: Adds a gap of 1rem (16px) between grid items.
Example
6. Hover and Focus States
- hover:bg-blue-600: Changes the background color on hover.
- focus:outline-none: Removes the outline on focus.
Example
7. Responsive Utilities
Tailwind supports responsive design using breakpoints:
- sm: For Small Device
- md: For Medium Device
- lg: For Large Device
- xl: For Extra large Device
- 2xl: For 2 time extra large Device
Example
8. Examples of Custom Utility Classes
Tailwind supports responsive design using breakpoints:
1. Custom Colors
Add your own color palette:
Usage in HTML:
2. Custom Spacing
Define new spacing values:
Usage in HTML:
3. Custom Font Sizes
Add unique font sizes:
Usage in HTML:
Start your build process
Run your build process with npm run dev.
- npm run start
Install Tailwind CSS with Vite
Install Tailwind CSS
Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.
- npm install -D tailwindcss postcss autoprefixer vite
- npx tailwindcss init -p
Configure the tailwind.config.js File
Edit the tailwind.config.js file to specify the paths to all of your template files. For example:
module.exports = {
content: [
"./index.html", // Include the main HTML file
"./src/**/*.{js,ts,jsx,tsx}", // Include all source files
], theme: {
extend: {},
},
plugins: [],
};
Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
Waht is @tailwind Directives
Tailwind offers directives to streamline your CSS. Here's how you can use them in your CSS file:
- @tailwind base;
@tailwind components;
@tailwind
These directives import Tailwind's base styles, components (like pre-designed buttons, forms, etc.), and utility classes. You can also create custom components this way.
- @tailwind base: This directive injects Tailwind's base styles, which include a set of CSS resets and default styles. These styles help ensure consistency across different browsers and provide a solid foundation for your design.
- @tailwind components: This directive includes Tailwind's component classes, which are pre-designed classes for common UI elements like buttons, forms, and cards. These classes help you quickly build and style components without writing custom CSS.
- @tailwind utilities: This directive adds Tailwind's utility classes, which are low-level classes for styling individual elements. These classes allow you to apply specific styles directly in your HTML, making it easy to create custom designs without writing custom CSS.
Start your build process
Run your build process with npm run dev.
- npm run start
Install and set up Gulp
Install Node.js
Gulp requires Node.js to run. Download and install the latest version of Node.js Node.js website.
- node -v
- npm -v
Initialize Your Project
If you don’t already have a project, create one and initialize a package.json file:
- mkdir my-project
- cd my-project
- npm init -y
Install Gulp
Install Gulp CLI globally (optional, if not already installed):
- npm install --global gulp-cli
- cd my-project
Install Gulp locally in your project:
- npm install --save-dev gulp
What is Gulp
Gulp is a powerful and flexible open-source JavaScript toolkit designed for automating and enhancing development workflows. It allows developers to simplify tasks such as minifying files, transpiling code, refreshing the browser, optimizing images, and much more. By defining tasks in a Gulpfile using JavaScript, developers can create pipelines that streamline their build processes, leading to faster and more efficient development cycles. Gulp uses plugins to handle specific tasks, providing a modular system that can be customized to suit any project's needs.
More Info : https://gulpjs.com/
Create a Gulpfile
In the root of your project, create a gulpfile.js (or gulpfile.cjs for CommonJS modules). This file defines the tasks Gulp will run.
- touch gulpfile.js
Write a Basic Gulp Task
Open gulpfile.js in a text editor and add a simple task:
Install Required Plugins
For example, to compile SCSS to CSS:
- npm install --save-dev gulp-sass sass
Run Gulp
Run the task using the Gulp CLI:
- gulp
Compile file from this command
Run the task using this command
- gulp watch
Install Tailwind CSS with gulp
Initialize Your Project
If you don’t already have a project, create one and initialize a package.json file:
- mkdir my-project
- cd my-project
- npm init -y
Install Dependencies
Install the required packages:
- install tailwindcss postcss autoprefixer gulp gulp-postcss gulp-sourcemaps --save-dev
Initialize Tailwind CSS
Generate the tailwind.config.js file by running
- npx tailwindcss init
Create Your CSS File
Create a CSS file (e.g., src/styles.css) and add the Tailwind directives:
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
Set Up Gulp
Create a gulpfile.js in the root of your project and configure it like this:
Configure the tailwind.config.js File
Specify the paths to all your template files in tailwind.config.js:
Create an HTML File
Create an index.html file in the root directory (or another folder) and include the processed CSS file:
Run Gulp
To process your CSS and watch for changes, use:
- # For one-time
build
gulp build - # For continuous
development
gulp watch
Start the Development Server
Run the following command to start your development server:
- npm run dev
Build for Production
To build your project for production, run:
- npm run build
Creating a versatile header demo in Tailwind CSS with multiple header layouts (logo on the left, logo in the center) and including a menu and social icons is straightforward. Here's how you can do it:
Steps to Implement:
- Up Your HTML Structure: Create a container for the header and its elements (logo, menu, social icons).
- Style with Tailwind CSS: Use Tailwind utility classes to style the header
- Toggle Between Layouts: Use conditional classes or different sections to display various header types.
Explanation:
- Button to trigger the popup: The button with id="openModalBtn" opens the modal when clicked.
- Popup modal: It’s initially hidden (hidden class). The modal has a background overlay and a white content box with a close button.
- JavaScript It handles showing and hiding the modal when the "Open Popup" button is clicked and when the "Close" button inside the modal is clicked.
Tooltip Implement:
Here's an example of creating a tooltip with Tailwind CSS:
Explanation:
- Tooltip Wrapper:
The div with relative group wraps the button and the tooltip. The group class allows styling of child elements (group-hover) when the parent (div) is hovered. - Target Element:
A button serves as the element to hover over. You can replace this with any element (e.g., text, icon). - Tooltip Content:
The div containing the tooltip text uses - absolute positioning to position the tooltip relative to the parent.
- left-1/2 transform -translate-x-1/2 -translate-y-full to center it horizontally and position it above the button.
- opacity-0 group-hover:opacity-100 to toggle visibility on hover.
- transition-opacity duration-200 for a smooth fade-in effect.
Scrollable Section Example
Install the plugin if not already included:
- /*Terminal*/
- npm install -D tailwind-scrollbar
Then enable it in your Tailwind configuration file:
Install the plugin if not already included:
plugins: [require('tailwind-scrollbar')],
};
Scrollable Section Example
Here’s an example of a scrollable section styled with Tailwind CSS. This can be useful for creating areas with custom scrollbars or scrollable content in a modal or container:
Utilities Classes
Tailwind CSS provides a wide range of utility classes that allow you to easily style elements without writing custom CSS. Below is a list of the most commonly used utility classes, categorized for easy reference:
1. Layout Utilities
Container
- container: Centers content and sets max-width based on breakpoints.
Display
- block: Displays an element as a block.
- inline-block: Displays an element as an inline-block.
- inline: Displays an element inline.
- flex: Applies flexbox layout.
- grid: Applies grid layout.
- hidden: Hides an element.
- inline-flex: Displays as inline flex.
- inline-grid: Displays as inline grid.
Position
- relative: Positions an element relative to its normal position.
- absolute: Positions an element absolutely within its parent.
- fixed: Positions an element relative to the browser window.
- sticky: Makes an element sticky (sticks on the page as you scroll).
- top-0, right-0, bottom-0, left-0 Positions the element at the edges.
Box Model
- m-0: Margin 0.
- mt-0, mr-0, mb-0, ml-0: Margin on top, right, bottom, and left.
- p-0: Padding 0.
- pt-0, pr-0, pb-0, pl-0: MPadding on top, right, bottom, and left.
2. Flexbox & Grid
Flex
- flex-row: Arrange items in a row (default).
- flex-col: Arrange items in a column.
- flex-wrap: Allows items to wrap to the next line.
- justify-start, justify-center, justify-between, justify-around, justify-evenly: Align items horizontally.
- items-start, items-center, items-end, items-baseline: Align items vertically.
- content-center, content-start, content-end: HAlign content within the flex container.
Grid
- grid-cols-1, grid-cols-2, grid-cols-3: Petc.: Defines the number of columns in a grid.
- grid-rows-1, grid-rows-2, etc: Defines the number of rows in a grid.
- gap-2, gap-4, gap-6: Sets space between grid items.
- col-span-2, row-span-2: Defines how many columns or rows an item spans.
3. Spacing Utilities
Margin
- m-{size}: Sets margin on all sides.
- fmt-{size}, mr-{size}, mb-{size}, ml-{size}: Set margin on individual sides.
Padding
- p-{size}: Sets padding on all sides.
- pt-{size}, pr-{size}, pb-{size}, pl-{size}: Sets padding on individual sides.
Gap
- gap-{size}: Sets space between flex or grid items.
- gap-x-{size}: Horizontal gap.
- gap-y-{size}: Vertical gap.
4. Typography
Text
- text-{color}: Sets text color.
- text-{size}: Sets font size.
- text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl: Sets text size.
- font-sans, font-serif, font-mono: Sets font family.
- font-bold, font-medium, font-light: Sets font weight.
- italic, not-italic: Makes text italic or not italic.
- uppercase, lowercase, capitalize: Text case transformation.
- truncate: Truncates text with ellipsis.
5. Backgrounds
Background Colors:
- bg-{color}: Sets background color (e.g., bg-blue-500, bg-gray-200).
Background Image:
- bg-cover: ackground image covers the entire element.
- bg-contain: Scales background image to fit the element.
Background Position:
- bg-center, bg-top, bg-bottom, bg-left, bg-right: Position background image.
Background Size:
- bg-auto: Default background size.
- bg-cover: Make the background image cover the container.
- bg-contain: Make the background image fit within the container.
6. Borders
Border:
- border: Applies a 1px border on all sides.
- border-{color}: Applies a 1px border on all sides.
- border-2, border-4, border-8: Set border width.
- border-t, border-r, border-b, border-l: Borders on individual sides.
- rounded, rounded-sm, rounded-md, rounded-lg:Rounds the corners.
- rounded-full:Rounds the element completely (for circles).
Background Image:
- bg-cover: ackground image covers the entire element.
- bg-contain: Scales background image to fit the element.
Background Position:
- bg-center, bg-top, bg-bottom, bg-left, bg-right: Position background image.
Background Size:
- bg-auto: Default background size.
- bg-cover: Make the background image cover the container.
- bg-contain: Make the background image fit within the container.