Introduction to Tailwind CSS Last Updated : 07 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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. Tailwind shifts the focus from traditional CSS components to functional utility classes, empowering you to build responsive and visually appealing interfaces with ease and speed.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.Key Advantages of Tailwind CSSNo need for complex class names: You don't have to worry about naming conventions for CSS classes and IDs.Minimized CSS code: Tailwind reduces the need for large custom CSS files, keeping your codebase smaller and more manageable.Easy customization: Tailwind allows easy customization of designs without writing additional CSS, helping you create reusable components.Built-in responsiveness: Tailwind's classes are optimized for responsiveness, allowing developers to create mobile-friendly layouts effortlessly.Scoped styles: Tailwind's utility classes help in making local changes to specific elements without affecting the entire stylesheet, unlike traditional global CSS.Why Choose Tailwind Over Other CSS Frameworks?Tailwind CSS stands out from traditional frameworks like Bootstrap or Foundation because of its utility-first methodology, which offers:Granular control over styling: Tailwind provides control at the atomic level, allowing you to customize each aspect of your design.Faster prototyping: By using utility classes, developers can iterate faster without worrying about conflicting styles or overriding pre-built components.Lightweight code: Tailwind generates smaller CSS files by purging unused styles, improving website performance with faster load times.Simplified responsive design: Tailwind’s utility classes make responsive design effortless without the need for custom media queries.Extensive documentation: Tailwind provides clear documentation and an intuitive syntax that speeds up the development process.Installing and Using Tailwind CSS in a ProjectThere are two main methods to use Tailwind CSS into your project: installing it locally or using a CDN link.Method 1: Install Tailwind CSS via npmFollow these steps to set up Tailwind CSS in your project using npm:Step 1: Initialize your projectnpm init -yStep 2: Install Tailwind CSSnpm install tailwindcssStep 3: Use the @tailwind directive to inject Tailwind's base, components, and utility styles into your CSS file.@tailwind base;@tailwind components;@tailwind utilities;Step 4: This is used to create a config file to customize the designs. It is an optional step.npx tailwindcss initStep 5: This command is used to compile style.css is the file that has to be compiled and output.css is the file on which it has to be compiled. If the file output.css is not created earlier then it will automatically be created.npx tailwindcss build styles.css -o output.cssMethod 2: Use Tailwind CSS via CDNThe quickest way to start using Tailwind CSS is by including a CDN link in the <head> section of your HTML file. Here’s an example:<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">This method allows you to use Tailwind without installing it on your server. However, there are some limitations when using the CDN version:Customization: You cannot customize Tailwind's default theme.Directives: You cannot use directives like @apply and @variants.Plugins: Third-party plugins cannot be installed.Example: Using Tailwind CSS via CDNBelow is a basic example that imports Tailwind CSS via CDN and applies margin to the body. The heading is styled with Tailwind's utility classes. HTML <!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 class="m-4"> <h1 class="text-green-500 text-4xl font-bold"> Geeksforgeeks </h1> <p><strong>Tailwind CSS Tutorial</strong></p> <p> You can use Tailwind CSS as a replacement of CSS, this is a framework that increase your pace to design any website. </p> </body> </html> Output Comment More infoAdvertise with us Next Article Tailwind CSS Container S Sapna2001 Follow Improve Article Tags : Web Technologies CSS Tailwind CSS Similar Reads Tailwind CSS Tutorial Tailwind CSS is a utility-first CSS framework that makes it easy to build custom designs without writing custom CSS. It allows you to apply individual utility classes directly in your HTML, which helps create fully customized layouts with minimal effort.Tailwind provides many utility classes for bui 7 min read Introduction to Tailwind 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. Tailwind shifts the focus fro 4 min read Tailwind CSS LayoutTailwind CSS ContainerThe Tailwind CSS container class is used to constrain the width of content and ensure responsive, centered layouts.Centers Content: Automatically centers content horizontally within the viewport.Responsive Widths: Sets maximum widths at different breakpoints for a consistent design across devices.Pr 3 min read Tailwind CSS Box SizingThe CSS box-sizing property controls how an element's width and height are calculated, including padding and borders. Tailwind CSS simplifies managing box-sizing for consistent layouts.Use utilities like box-border to include borders and padding in the element's size.Use box-content to exclude borde 3 min read Tailwind CSS DisplayThis class accepts more than one value in Tailwind CSS. All the properties are covered in a class form. It is the alternative to the CSS display property. This class is used to define how the components (div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this 4 min read Tailwind CSS FloatThis class accepts more than one value in tailwind CSS. It is the alternative to the CSS float property. The float class defines the flow of content for controlling the wrapping of content around an element. Float Classesfloat-rightfloat-left float-none float-right ClassThis class is used to make th 3 min read Tailwind CSS ClearThis class accepts more than one value in Tailwind CSS. All the properties are covered in a class form. It is an alternative to the CSS clear property. This class is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element in relation t 5 min read Tailwind CSS Object FitThis class accepts more than one value in Tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS object-fit property. This class is used to specify how an image or video should be resized to fit its content box for controlling a replaced element's content resizi 3 min read Tailwind CSS Object PositionThe Tailwind CSS Object Position class accepts more than one value. All the properties are covered as in class form. It is the alternative to the CSS object-position property. This class is used to specify, how an image or video element is positioned with x/y coordinates within its content box. It a 2 min read Tailwind CSS OverflowThis overflow is for controlling how an element content is handled that is too large for the container. It tells whether to clip content or add scroll bars. This class accepts more than one value in Tailwind CSS. It is the alternative to the CSS Overflow property. There is a separate property in CSS 7 min read Tailwind CSS overscroll BehaviorThis class accepts more than one value in tailwind CSS. It is the alternative to the CSS Overscroll-behavior property. This class is used to set the behavior of the browser when the boundary of a scrolling area is reached. This property can be used to prevent unwanted scrolling in pages where there 9 min read Tailwind CSS PositionThis class accepts more than one value in tailwind CSS. It is the alternative to the CSS Position property. This class is used for controlling how an element is positioned in the DOM.Position classes:staticfixedabsoluterelativestickystatic: This class is used to set the position of an element accord 4 min read Tailwind CSS Top/Right/Bottom/LeftThese classes accept many values in tailwind CSS in which all the properties are covered in class form. These are the alternative to the CSS Top/Right/Bottom/Left properties. These classes are used to control the alignment of a positioned element. Remember we can use these properties only with posit 3 min read Tailwind CSS VisibilityThis 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 a 1 min read Tailwind CSS Z-indexThe tailwind CSS is a utility CSS framework that provides classes the manage our HTML content in the use of CSS. The tailwind CSS makes our designing part easier and responsive for multiple platforms. The z-Index utility is for controlling the stack order of an element. It is the alternative to the 3 min read Tailwind CSS FlexboxTailwind CSS Flex DirectionThe CSS flexbox is a vital feature to develop the frontend, there are four directions available in CSS so in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-direction Property for fast development of front-end.Note: To activate the flex-direction you h 3 min read Tailwind CSS Flex WrapThe 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 includ 2 min read Tailwind CSS FlexThe 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 mu 5 min read Tailwind CSS Flex GrowThe 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 co 2 min read Tailwind CSS Flex ShrinkTailwind CSS Flex Shrink provides utilities to control the shrinking of flex items.Syntax:class= "flex-shrink-0"Flex shrink Values:flex-shrink-0: This class is used to prevent the shrinking of an element.flex-shrink: This class is used to shrink an element.Example 1: This example shows the usage of 1 min read Tailwind CSS OrderOrder 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 1 min read Tailwind CSS GridTailwind CSS Grid Template ColumnsThis 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 o 2 min read Tailwind CSS Grid Column Start / EndThis 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-column property in CSS it was used to describes the number of properties that allow to design of grid structures and control the placement of grid items using Tai 2 min read Tailwind CSS Grid Template RowsThis class accepts more than one value in tailwind CSS and all the properties are covered as in class form. It is the alternative of CSS grid-template-row property in CSS. It is used to set the number of rows and size of the rows of the grid, here we will do the same but for fast development of fron 2 min read Tailwind CSS Grid Row Start / EndThis 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-row property in CSS. It is used to describes the number of properties that allow to design of grid structures and control the placement of grid items using Tailw 2 min read Tailwind CSS Grid Auto FlowThis 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-colgr 2 min read Tailwind CSS Grid Auto ColumnsThis class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to CSS grid-auto-columns property. This class is used to specify the size for the columns of implicitly generated grid containers. This class is used for utilities to c 3 min read Tailwind CSS Grid Auto RowsThis class accepts more than one value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS grid-auto-rows property. This class is used to specify the size for the rows of implicitly generated grid containers. This class is used to utilities to c 3 min read Tailwind CSS GapThis 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 o 3 min read Tailwind CSS AlignmentTailwind CSS Justify ContentThis class accepts two values in tailwind CSS. It is the alternative to the CSS justify-content property. This class is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container. It is basically used f 3 min read Tailwind CSS Justify ItemsThis class accepts two values in tailwind CSS. It is the alternative to the CSS justify-items property. This class is used for controlling how grid items are aligned along their inline axis.Justify Items:justify-items-auto justify-items-start justify-items-end justify-items-center justify-items-stre 3 min read Tailwind CSS Justify SelfThis class accepts two values in tailwind CSS. The different properties are covered in the class form. It is the alternative to the CSS justify-self property. This class is used to specify the alignment of a content’s position along with the appropriate axis in a CSS Grid.Justify self class options: 2 min read Tailwind CSS Align ContentThis class accepts lots of values in Tailwind CSS. It is the alternative to the CSS Align Content property. This class is used for changing the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property d 3 min read Tailwind CSS Align ItemsThis class accepts a lot of values in tailwind CSS. It is the alternative to the CSS Align Items property. This class is used to set the alignment of items inside the flexible container or in the given window. It aligns the flex Items across the axis. The align-self class is used to override the ali 2 min read Tailwind CSS Align SelfThis class accepts lots of values in tailwind CSS. It is the alternative to the CSS Align Self property. This class is used to control how an individual flex or grid item is positioned along its container's cross axis.Align Self Classes:self-auto self-start self-end self-center self-stretch self-aut 2 min read Tailwind CSS Place ContentThis class accepts lots of values in tailwind CSS. It is the alternative to the CSS Place Content property. This class is used to control how content is justified and aligned at the same time. To set the multiple property values in a single class. Here the place-content class can hold the value of t 3 min read Tailwind CSS Place ItemsThis class accepts lots of values in tailwind CSS. It is the alternative to the CSS Place Items property. This class is used for controlling how items are justified and aligned at the same time. So the place-items class can hold the value of the align-items and justify-items class values.Place Items 3 min read Tailwind CSS Place SelfThis class accepts lots of values in tailwind CSS. It is the alternative to the CSS Place Items property. This class is used for controlling how an individual item is justified and aligned at the same time. In this class, you can set multiple class values in a single class. Place Self Classes:place- 3 min read Tailwind CSS SpacingTailwind CSS PaddingThis class accepts lots of values in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS Padding Property. This class is used to create space around the element, inside any defined border. We can set different paddings for individual sides (top, right 3 min read Tailwind CSS MarginThis class accepts lots of values in tailwind CSS in which all the properties are covered as in the class form. It is the alternative to the CSS Margin Property. This class is used to create space around the element, outside any defined border. We can set different margins for individual sides(top, 4 min read Tailwind CSS Space BetweenThis class accepts lots of values in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS Space Between property. This class is used for controlling the space between child elements.Space Between classes:space-y-0space-y-reverse-space-y-0space-x-0sp 3 min read Tailwind CSS SizingTailwind CSS WidthThis class accepts lots of values in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS Width Property. This class is used to set the width of the text, images. The width can be assigned to the text and images in the form of pixels(px), percentage 2 min read Tailwind CSS Min-WidthThis class accepts lots of values in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS min-width property. This class is used to define the minimum width of an element. The value of the width cannot be less than the value of the min-width. If the c 1 min read Tailwind CSS Max-WidthThis class accepts lots of values in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS max-width property. This class is used to define the maximum width of an element. The value of the width cannot be greater than the value of the max-width. If th 3 min read Tailwind CSS HeightThis class accepts lots of values in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS height Property. This class is used to set the height of an element. The height class does not contain padding, margin, and the border of elements.Height classes 3 min read Tailwind CSS Min-HeightThis class accepts lots of values in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS Min-Height Property. This class is used to set the minimum height of an element. The min-height class is used when the content of the element is smaller than the 2 min read Tailwind CSS Max-HeightThis class accepts lots of values in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS Max-Height property. This class is used to set the maximum height of an element. If the content of the element is larger than the specified maximum height then t 2 min read Tailwind CSS TypographyTailwind CSS Font FamilyThis class accepts a lot of font names in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS font-family property. This class is used to specify the font of an element. It can have multiple fonts as a backup system i.e. if the browser does not suppo 2 min read Tailwind CSS Font SizeThis 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 font-size property. This class is used to set the font size of the text in an HTML document.Font size classes:text-xs: This class defines the text size as extr 2 min read Tailwind CSS Font SmoothingThis 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 font-smooth property. This class is used for controlling the font smoothing of an element.Font smoothing classes:antialiasedsubpixel-antialiased Note: This cla 1 min read Tailwind CSS Font StyleThis 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 font-style property. If we want to give design to any type of text then we can make the use of Tailwind CSS font style class. It helps to make a better user exp 2 min read Tailwind CSS Font WeightThis class accepts lots of value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS font-weight property. This class is used to set the weight or thickness of the font being used with the HTML Text. The font-weight applied will depend on the font- 2 min read Tailwind CSS Font Variant NumericThis class accepts lots of values in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS font-variant-numeric property. This class is used to control the usage of alternate glyphs. This is done in terms of units or markers such as numbers or fraction 2 min read Tailwind CSS Letter SpacingThis 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 letter-spacing property. This class is used to set the spacing behavior between text characters i.e, increasing or decreasing the space between characters in a 2 min read Tailwind CSS Line HeightThis 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 Line Height property. This class is used to set the amount of space used for lines, such as in the text. Negative values are not allowed.Line Height classes:le 2 min read Tailwind CSS List Style TypeThis 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 Type property. This class specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if the ‘list-style-im 1 min read Tailwind CSS Placeholder ColorThis class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. By using this class we can color any placeholder text. In CSS, we do that by using the CSS Color property. Placeholder Color classes:placeholder-transparent: The placeholder text color will be 2 min read Tailwind CSS Placeholder OpacityThis class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. By using this class we can set the opacity of any placeholder text. In CSS, we do that by using the CSS Opacity property. Placeholder Opacity class:placeholder-opacity-0: Control the opacity of 2 min read Tailwind CSS Text AlignmentThis class accepts lots of values in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS text-align property. This class is used to specify the horizontal alignment of text in an element.Text Alignment classes:text-lefttext-centertext-righttext-justif 2 min read Tailwind CSS Text ColorThis 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 text. In CSS, we do that by using the CSS Color property.Text Color classes:text-transparent: The text color will be transparent.text-current: The text color w 2 min read Tailwind CSS Text OpacityThis class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. By using this class we can set the opacity of any text. In CSS, we do that by using the CSS Opacity property. Text Opacity: text-opacity-0: Control the opacity of an element's placeholder color 2 min read Tailwind CSS Text DecorationThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS text-decoration property. This class is used to “decorate†the content of the text. It is essentially decorating the text with different kinds of lines. Text Decorat 2 min read Tailwind CSS Text TransformThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS text-transform property. This class is used to control the capitalization of the text. Text Transform classes: uppercase lowercase capitalize normal-case uppercase: 2 min read Tailwind CSS Vertical AlignmentThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS vertical-align property. This class is used to specify the vertical alignment of the table-box or inline element. Vertical Alignment classes: align-baseline: It alig 2 min read Tailwind CSS WhitespaceThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS white-space property. This class is used to control the text wrapping and white-spacing. There are several types of values in this property to use.Whitespace classes 3 min read Tailwind CSS Word BreakThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS word-break property. This class is used to specify how to break the word when the word reached at end of the line. The line breaks in the text can occur in certain s 2 min read Tailwind CSS BackgroundsTailwind CSS Background ImageThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS background-image property. This class is used to set one or more background images to an element. By default, it places the image on the top left corner. To specify 2 min read Tailwind CSS Background ClipThis class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS background-clip property. This property is used to define how to extend background (color or image) within an element.Background Clip Classes:Class NameDescr 2 min read Tailwind CSS Background ColorThis class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS background-color property. This class is used to specify the background color of an element. The background covers the total size of the element with padding 2 min read Tailwind CSS Background OpacityThis class accepts lots of value in tailwind CSS in which all the properties are covered in class form. The bg-opacity is the class of an element that describes the transparency of the element. It is the alternative to the CSS Opacity / Transparency.Background Opacity class:background-opacity-0: Con 2 min read Tailwind CSS Background PositionThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS background-position property. This class is used to set one or more background images to an element. By default, it places the image on the top left corner. To speci 2 min read Tailwind CSS Background RepeatThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS background-position property. This class is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will b 3 min read Tailwind CSS Background SizeThis class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS background-size property. This class is used to set the size of the background image. Background Size classes: bg-autobg-coverbg-contain bg-auto: It is used to set t 2 min read Tailwind CSS Gradient Color StopsThis 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 Gradients property. Gradient Color Stops classes: from-transparent: This class is used to set the start color transparency.from-current: This class is used to ado 2 min read Like