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.
Key Features Tailwind css
Who Can Benefit from Tailwind

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.
Advantages of Tailwind CSS

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.

/** @type {import('tailwindcss').Config} */
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.

/** input.css */
  • @tailwind base;
  • @tailwind components;
  • @tailwind utilities;

change into config file

Open the tailwind.config.js file and add * into the content array like this:

// tailwind.config.js
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:

// tailwind.config.js
"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.

  1. Consistent Styling: The base layer resets any browser-specific default styling. This helps to achieve a more consistent look across different environments.
  2. Typography: It typically includes basic typographic styles, like setting uniform font sizes, line heights, and font families for elements like h1, p, and a.
  3. 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:

/* Example of base layer styles */
@layer base {
html {
font-family: 'Inter', sans-serif;
line-height: 1.5;
}

body {
margin: 0;
padding: 0;
color: #333;
}

}

Explanation:

  1. @layer base: Adds your custom styles to the base layer.
  2. @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.

  1. Utility-First: They use Tailwind’s utility classes to achieve specific designs without writing custom CSS.
  2. Customizable: UYou can easily tweak these components by changing or adding utility classes.
  3. Consistency: Tailwind ensures uniform design across the app by relying on the same design tokens (colors, spacing, etc.) defined in the Tailwind configuration.
  4. 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.

/** Terminal */
  • 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.

/** input.css */
  • 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:

// tailwind.config.js
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.

/** input.css */
  • @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:

/** CSS */

  • @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.

/** Terminal */
  • 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.

/** Terminal */
  • node -v
  • npm -v

Initialize Your Project

If you don’t already have a project, create one and initialize a package.json file:

/** Terminal */
  • mkdir my-project
  • cd my-project
  • npm init -y

Install Gulp

Install Gulp CLI globally (optional, if not already installed):

/** Terminal */
  • npm install --global gulp-cli
  • cd my-project

Install Gulp locally in your project:

/** Terminal */
  • 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.

/** Terminal */
  • 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:

/** Terminal */
  • npm install --save-dev gulp-sass sass

Run Gulp

Run the task using the Gulp CLI:

/** Terminal */
  • gulp

Compile file from this command

Run the task using this command

/** Terminal */
  • 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:

/** Terminal */
  • mkdir my-project
  • cd my-project
  • npm init -y

Install Dependencies

Install the required packages:

/** Terminal */
  • install tailwindcss postcss autoprefixer gulp gulp-postcss gulp-sourcemaps --save-dev

Initialize Tailwind CSS

Generate the tailwind.config.js file by running

/** Terminal */
  • npx tailwindcss init

Create Your CSS File

Create a CSS file (e.g., src/styles.css) and add the Tailwind directives:

/** styles.css */
  • @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:

/** Terminal */
  • # For one-time build
    gulp build

  • # For continuous development
    gulp watch

Start the Development Server

Run the following command to start your development server:

/** Terminal */
  • npm run dev

Build for Production

To build your project for production, run:

/** Terminal */
  • 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:

  1. Up Your HTML Structure: Create a container for the header and its elements (logo, menu, social icons).
  2. Style with Tailwind CSS: Use Tailwind utility classes to style the header
  3. Toggle Between Layouts: Use conditional classes or different sections to display various header types.

Code Example - Left logo Header

Code Example - center logo Header

Popup Implement:

Here's an example of a simple popup modal using Tailwind CSS:

Explanation:

  1. Button to trigger the popup: The button with id="openModalBtn" opens the modal when clicked.
  2. Popup modal: It’s initially hidden (hidden class). The modal has a background overlay and a white content box with a close button.
  3. 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:

  1. 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.
  2. Target Element:
    A button serves as the element to hover over. You can replace this with any element (e.g., text, icon).
  3. Tooltip Content:
    The div containing the tooltip text uses
  4. absolute positioning to position the tooltip relative to the parent.
  5. left-1/2 transform -translate-x-1/2 -translate-y-full to center it horizontally and position it above the button.
  6. opacity-0 group-hover:opacity-100 to toggle visibility on hover.
  7. 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:

module.exports = {
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.
Order now

100% Money Back Guarantee

s