The Wayback Machine - https://web.archive.org/web/20240822105531/https://www.geeksforgeeks.org/tailwind-css/
Open In App

Tailwind CSS

Last Updated : 14 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.


What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework used for building UI components. Tailwind provides low-level utility classes that you can combine to build custom designs directly in your HTML. This approach promotes flexibility and efficiency, allowing developers to create responsive websites without writing custom CSS. Tailwind CSS streamlines the design process by offering a comprehensive set of pre-defined classes for layout, spacing, typography, and more.


Why Tailwind CSS?

As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the project. Tailwind has come with inbuilt a lot of features and styles for users to choose from and is also used to reduce the tendency of writing CSS code and create a beautiful custom UI. It will help you to overcome the complicated task. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

Tailwind CSS

Tailwind CSS

Table of Content


Using Tailwind CSS via a CDN link is quick and simple. Just include a <link> tag in the <head> section of your HTML. This gives access to Tailwind’s utility classes without extra files on your server. It’s ideal for prototypes, small projects, or experimentation. No complex setup is needed. The CDN ensures you use the latest version. This makes it easy to start with modern, responsive design.

<script src=”https://cdn.tailwindcss.com”></script>

Note: There are some limitations when CDN is used. Some of them are:

  • Customize Tailwind’s default theme can’t be used.
  • Directives like @apply, @variants, etc can’t be used.
  • Can’t install third-party plugins.


Installation of Tailwind CSS

Installation of Tailwind CSS via npm

  • Basically Tailwind is available on npm and you can install it using the following command:
    npm install tailwindcss
  • After that create ad Tailwind configuration file using the following command:
    npm tailwind init {name of file}

Installation of Tailwind CSS via yarn

  • You can install tailwind by using the yarn command:
    yarn add tailwindcss
  • After that create ad Tailwind configuration file using the following command:
    yarn tailwind init {name of file}

Example: It is a basic example of Tailwind CSS that describes how to change the background color on mouse hover.

Tailwind CSS 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- Tailwind CSS CDN link -->
    <link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="h-full border-2 border-gray-200 
                border-opacity-60 rounded-lg 
                overflow-hidden">
        <div class="p-6 hover:bg-green-600 
                    hover:text-white transition 
                    duration-300 ease-in">
            <h1 class="text-2xl font-semibold mb-3">
                Hover
            </h1>
        </div>
    </div>
</body>

</html>

OutputTailwind

Let’s deep dive into the basics and components to Learn Tailwind CSS.

Tailwind-CSS

Tailwind CSS


Getting Started with Tailwind CSS

Tailwind CSS introduces you to the utility-first CSS framework to streamlines designing custom user interfaces. Learn how to set up Tailwind CSS, understand its core concepts, and apply utility classes to style your HTML elements efficiently, making your web development process more flexible and streamlined.


Tailwind CSS Layout

Tailwind CSS Layout utilities help you control the positioning and sizing of elements on your page. Use these classes to create responsive, flexible layouts that adapt to various screen sizes with ease.


Tailwind CSS Flexbox

Tailwind CSS Flexbox utilities simplify building flexible and responsive layouts. They offer classes to manage the alignment, direction, and spacing of items within a flex container, making layout adjustments straightforward.


Tailwind CSS Grid

Tailwind CSS Grid utilities allow you to create complex, responsive grid layouts effortlessly. With a range of classes, you can define columns, rows, and gaps, enabling you to design intricate grid systems quickly.


Tailwind CSS Alignment

Tailwind CSS Alignment utilities enable precise control over the alignment of elements. Easily adjust vertical and horizontal alignment within containers, ensuring your content is positioned exactly where you want it.


Tailwind CSS Spacing

Tailwind CSS Spacing utilities manage the margins and padding of your elements. Use these classes to add consistent spacing between items, enhancing the overall layout and design of your website.


Tailwind CSS Sizing

Tailwind CSS Sizing utilities help you define the width and height of your elements. Quickly adjust dimensions with classes that ensure your elements fit perfectly within your design.


Tailwind CSS Typography

Tailwind CSS Typography utilities control text appearance, including font size, weight, line height, and letter spacing. These classes ensure your text is styled consistently and legibly throughout your project.


Tailwind CSS Backgrounds

Tailwind CSS Backgrounds utilities manage background colors, images, and gradients. Apply these classes to set eye-catching backgrounds that enhance your site’s visual appeal.


Tailwind CSS Borders

Tailwind CSS Borders utilities allow you to style borders with different widths, colors, and styles. Use these classes to add borders to your elements and create visual separation or emphasis.


Tailwind CSS Effects

Tailwind CSS Effects utilities provide classes for adding visual effects like shadows and opacity. Enhance the look of your elements with effects that add depth and focus to your design.


Tailwind CSS Filters

Tailwind CSS Filters utilities let you apply image effects like blur, brightness, and contrast. Use these classes to adjust the visual presentation of images and other elements dynamically.


Tailwind CSS Tables

Tailwind CSS Tables utilities style HTML tables with ease. Customize table elements, including borders, spacing, and alignment, to create clear and attractive data presentations.


Tailwind CSS Transitions and Animation

Tailwind CSS Transitions and Animation utilities simplify adding animations and transitions to your elements. Use these classes to create smooth, dynamic effects that improve user interactions and engagement.


Tailwind CSS Transforms

Tailwind CSS Transforms utilities enable you to rotate, scale, and translate elements. Apply these transformations to create engaging visual effects and enhance the user experience.


Tailwind CSS Interactivity

Tailwind CSS Interactivity utilities provide classes for adding interactive features like hover and focus states. These utilities help you create responsive and engaging UI elements that react to user actions.


Tailwind CSS SVG

Tailwind CSS SVG utilities simplify the styling of SVG graphics. Use these classes to control SVG attributes like size, color, and positioning directly within your HTML. Tailwind CSS makes it easy to integrate and style scalable vector graphics for a cleaner, more consistent design.


Advantages of Tailwind CSS

  • Highly Customizable.
  • Enables building complex responsive layout.
  • Responsive and development are easy.
  • Component creation is easy.


Disadvantages of Tailwind CSS

  • There are missing headers and navigation components.
  • It takes time to learn how to implement inbuilt classes.


Complete References


Tailwind CSS – FAQs

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your HTML. It allows for flexible and efficient styling without writing custom CSS.

How to use Tailwind CSS?

To use Tailwind CSS, include it in your project via npm or a CDN. Create a configuration file if needed, then apply utility classes directly to your HTML elements to style them. Tailwind offers a set of pre-defined classes for layout, spacing, typography, and more.

Is Tailwind CSS free?

Yes, Tailwind CSS is free and open-source. You can use it for personal and commercial projects without any cost. It’s available under the MIT license.

What is Tailwind CSS used for?

Tailwind CSS is used for designing responsive, customizable user interfaces. It provides utility classes to manage layout, spacing, typography, colors, and more, helping developers create clean and maintainable designs.

Which is better, Tailwind or Bootstrap?

The choice between Tailwind and Bootstrap depends on your needs. Tailwind offers more flexibility with utility-first classes for custom designs, while Bootstrap provides pre-designed components for quicker development. Tailwind is ideal for custom, unique designs, while Bootstrap is better for standardized components.

How to learn Tailwind CSS?

To learn Tailwind CSS, start with this free Tutorial and official documentation. Here, we have created a compiled, easy to learn Tailwind CSS Tutorial.

What are the benefits of using Tailwind CSS?

Tailwind CSS offers several benefits, including faster development with utility classes, a highly customizable design system, and reduced need for custom CSS. It helps maintain consistency and speeds up the UI design process.

Can Tailwind CSS be used with other frameworks?

Yes, Tailwind CSS can be used with other frameworks and libraries. It integrates well with modern JavaScript frameworks like React, Vue, and Angular, and can complement existing styles or components.

Is Tailwind CSS easy to customize?

Yes, Tailwind CSS is highly customizable. You can configure and extend the default design system through the tailwind.config.js file, allowing you to tailor the framework to your project’s specific needs and branding.

Can Tailwind CSS be used for large projects?

Absolutely. Tailwind CSS is suitable for large projects. Its utility-first approach helps manage complex designs and maintain consistency across extensive codebases. The framework’s modularity and customizability make it scalable for various project sizes.



https://media.geeksforgeeks.org/auth/avatar.png
GeeksforGeeks
News
Improve
Next Article
Introduction to Tailwind CSS

Similar Reads

What is the use of the tailwind.config.js file in Tailwind CSS ?
The tailwind.config.js file in Tailwind CSS serves as a central configuration hub for customizing the framework. It allows you to define colors, fonts, breakpoints, and more, tailoring Tailwind to fit your project's specific design and functionality requirements. Syntax:/** @type {import('tailwindcss').Config} */module.exports = { content: [], them
1 min read
Storybook-tailwind. How should I add tailwind to storybook
In this article, we will guide you through the process of adding Tailwind CSS to Storybook to enhance your UI development. Storybook is an open-source UI that helps developers create reusable, organized UI components with proper documentation independently. Tailwind CSS is basically a utility-first CSS framework for building rapid custom UI. Prereq
2 min read
Which CSS framework is better Tailwind CSS or Bootstrap ?
In this article, we will see which CSS framework is better tailwind CSS or bootstrap. Both are widely used CSS frameworks for styling the front end. We will understand each one of them in detail. Both frameworks have their own pros and cons so it depends upon the type of application you are going to build and accordingly you can choose the best fra
5 min read
How to Add a @tailwind CSS Rule for CSS Checker ?
Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS. In this article, we will ex
4 min read
How to use CSS Animations with Tailwind CSS ?
Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs. Table of Content Tailwind CSS Animation Utility ClassesCSS Animations with Tailwind CSS and JavaScriptT
3 min read
Underline Hover Animation Effect using Tailwind CSS
The Tailwind CSS underline animation is a visual effect that can be added to any text or heading or a specific word in the web page using the Tailwind CSS utility framework. The basic function of this effect is this creates an underline animation from left to right with a smooth transition, in simpler words it created underline animation whenever w
3 min read
How to set width transition in Tailwind CSS ?
In Tailwind CSS, the transition utility is used to apply a width transition to an element. The transition utility accepts a list of properties, duration, and timing functions for the transition. Approach: To create a width transition, we can use the transition class and a duration and easing function to animate the width change. For example, we can
2 min read
How to enable dark mode in Tailwind CSS ?
In this article, we will see how to enable dark mode in Tailwind CSS. there are many ways, some of them we will see. Tailwind CSS has special features to enable dark mode on the webpage. To enable dark mode in Tailwind CSS, we can define a dark theme in our Tailwind config file section and then we have to use the dark class in our HTML to apply it
3 min read
How to Remove Arrow on Input Type Number with Tailwind CSS ?
When using the input element with the type="number" attribute, most browsers will display an arrow control (also known as a spinner) at the right side of the input field. This control allows users to increment or decrement the value using the up and down arrows. However, in some cases, you may want to remove this arrow control for styling or UX pur
2 min read
Top 10 Tailwind CSS Templates and Themes
CSS adds visual weight to our websites. It makes them look, smoother, better, and easier to use. But writing CSS can be a headache. Thankfully there are a lot of CSS frameworks out there – like Tailwind, Bootstrap, Foundation, Spectre, Bulma, etc. for creating and rendering beautiful user interfaces. Tailwind CSS is basically a utility-first CSS fr
5 min read
How to Change the Underline Color in Tailwind CSS ?
The Tailwind underline class adds an underline to the text, and the decoration-color class changes the color of the text-decoration property. Both classes can be used together to add an underline and color to the text. Syntax: The syntax for the tailwind underline and decoration-color classes is as follows. &lt;element class="underline decoration-{
3 min read
How to change svg icon colors with Tailwind CSS ?
SVG stands for Scalable Vector Graphics and is an XML-based ( can be edited ) vector image format. SVG is commonly used for icons, animations, interactive charts, graphs, and other dynamic graphics in the browser. As it is XML-based, you can easily edit or change the SVG icon colors with Tailwind. Approach: You can simply customize the class of SVG
3 min read
Tailwind CSS Stroke Width
This class accepts lots of value in tailwind CSS in which all the properties are covered in form. This class is used to set the width of a border in an SVG shape. This property can only be applied to elements that have a shape or text content elements. In CSS, we did that by using the CSS Stroke-width property. Stroke Width classes: stroke-0: This
1 min read
Can I Create Masonry Layout using Tailwind CSS Utility Classes ?
Yes, you can create a Masonry layout using Tailwind CSS utility classes. A Masonry layout is a popular design pattern used for displaying images or other elements in a grid-like structure where each item is of varying height and width. This layout creates a visually appealing and dynamic design that helps to break the monotony of a traditional grid
3 min read
Tailwind CSS Filter
The filter class is used to set the visual effect of an element. This class is mostly used in image content. In CSS, we do that by using the CSS filter property. Tailwind CSS newly added feature filter in 2.1 version. Filter Classes: filter: This class is used to enable filters.filter-none: This class is used to remove filters. Syntax: &lt;element
1 min read
Tailwind CSS Grayscale
The Grayscale class is used to apply a filter to the image to set the grayscale of the image. In CSS, we do that by using the CSS grayscale() Function. Tailwind CSS newly added feature brightness in 2.1 version. Grayscale: grayscale-0: This class is used to represents the original image.grayscale: This class is used to represents the linear multipl
1 min read
How to use font from local files globally in Tailwind CSS ?
Tailwind CSS provides a set of default font families that you can use in your projects. These font families are defined as utility classes in the form of font-{family-name} and can be easily applied to any HTML element. These are the default fonts that are provided by the tailwind CSS: sans: sans-serif font family, including system fonts such as Ar
4 min read
Tailwind CSS Mix Blend Mode
This class accepts lots of value in Tailwind CSS in which all the properties are covered in class form. This class is used to specify how an element’s content should be blended with the background. In CSS, we can do that by using the CSS mix-blend-mode property. Mix Blend Mode classes : mix-blend-normal: No blending is applied to the element.mix-bl
3 min read
How to set default font color using Tailwind CSS ?
Tailwind CSS is a popular utility-first CSS framework that simplifies styling web pages by composing pre-defined CSS classes. While designing web pages, setting a default font color is a common task. In this article, we'll explore different ways to set the default font color using Tailwind CSS, which can help you create more visually appealing webs
4 min read
Tailwind CSS Ring Offset Color
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can color any ring-offset. In CSS, we do that by using the CSS Color property. Ring Color classes: ring-offset-transparent: The ring-offset color will be transparent.ring-offset-current: The ring-offset color will depend on
2 min read
Tailwind CSS Flex Wrap
The CSS flexbox is a vital feature to develop the frontend, there are three wraps available in CSS so in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-wrap Property for fast development of front-end. Note: To activate the flex-wrap you have to include the flex class in your element before the flex-w
2 min read
Tailwind CSS Flex
The CSS flexbox is a vital feature to develop the frontend, there is four flex available in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex Property for fast development of front-end. It is used to set the length of flexible items. The flex class is much responsive and mobile-friendly. It is easy to p
5 min read
Tailwind CSS Flex Grow
The CSS flexbox is a vital feature to develop the frontend, there is two flex-grow available in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex grow Property for the fast development of the front-end. This class specifies how much the item will grow compared to other items inside that container. In ot
2 min read
Tailwind CSS Flex Shrink
The CSS flexbox is a vital feature to develop the frontend, there is two flex-shrink available in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-shrink Property for the fast development of the front-end. This class specifies how much the item will shrink compared to other items inside that container.
2 min read
Tailwind CSS Order
Order is one of the best feature of tailwind CSS by using this class we can order the flex and grid items according to our requirements. There are lots of order class. This class is used to render flex and grid items in a different order than they appear in the DOM. Order: order-1order-2order-3order-4order-5order-6order-7order-8order-9order-10order
1 min read
Tailwind CSS Grid Template Columns
This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS grid-template-columns property in CSS. It is used to set the number of columns and size of the columns of the grid, here we will do the same but for fast development of front-end. The number of columns is set by the n
2 min read
Tailwind CSS Gap
This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative to the CSS gap property. This class is used to set the spacing also caller gutter between the rows and columns. As like column-gap and row-gap using separately both so that one can use simply gap property that can given colu
3 min read
Tailwind CSS Grid Auto Flow
This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS grid-auto-flow property and it is used to specify how auto-placed items get flowed into the grid items using Tailwind CSS. Grid Auto Flow: grid-flow-rowgrid-flow-colgrid-flow-row-densegrid-flow-col-dense grid-flow-row
2 min read
Tailwind CSS Visibility
This class accepts two values in tailwind CSS. It is the alternative to the CSS visibility property. This class is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. Use the display property to remove or hide and delete an element from the browser. Visibility: InvisibleV
2 min read
Tailwind CSS List Style Position
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS list-style-position Property. This class specifies the position of the marker box with respect to the principal block box. List Style Position classes: list-inside: In this value, the marker is the first elemen
1 min read
Article Tags :
three90RightbarBannerImg