Tailwind CSS Tutorial Last Updated : 08 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 building responsive and custom designs.You can easily customize the framework to suit your needs via its configuration file.Tailwind helps build seamless mobile-first and responsive designs.Tailwind CSS has a feature that removes any unused CSS, improving performance.To begin with Tailwind CSS, you need to install it using one of the methods. The easiest way is by using the CDN for quick setup.Getting Started with Tailwind CSSHow to Add Tailwind CSS to HTML?How to Install Tailwind CSS with Create React App?How to setup Tailwind CSS with Vite?Install Tailwind CSS with PHPInstall & Setup Tailwind CSS with Next.jsHow to use Tailwind CSS with Django?How to setup Tailwind CSS in AngularJS?Let us now take a look at our first code example. HTML <html> <head> <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> In this example:Tailwind CDN: The link to the Tailwind CSS CDN is included in the <head> section of the HTML document to load the necessary CSS styles.Hover Effect:hover:bg-green-600: Changes the background color to green when the user hovers over the element.hover:text-white: Changes the text color to white when hovered.transition duration-300 ease-in: Applies a smooth transition effect for 300ms when hovering.Responsive Design: The class names used here are mobile-first, ensuring they work well across different screen sizes.Tailwind CSSBasicsGet started with Tailwind CSS by learning its core principles and the utilities it offers for building custom designs.Introduction to Tailwind CSSTailwind CSS: Utility-First Styling for Rapid UI DevelopmentTailwind CSS LayoutTailwind CSS makes it easy to manage layouts using utility classes that control container sizes, box sizing, and positioning.ContainerBox SizingDisplayFloatClearObject FitObject PositionOverflowOverscroll BehaviorPositionTop/Right/Bottom/LeftVisibilityZ-indexTailwind CSS FlexboxTailwind CSS allows you to create flexible and responsive layouts using Flexbox.Flex DirectionFlex WrapFlexFlex GrowFlex ShrinkOrderTailwind CSS GridCreate complex grid layouts with ease using Tailwind's grid utilities.Grid Template ColumnsGrid Column Start / EndGrid Template RowsGrid Row Start / EndGrid Auto FlowGrid Auto ColumnsGrid Auto RowsGrid GapTailwind CSS AlignmentTailwind CSS provides utility classes to align content both horizontally and vertically.Justify ContentJustify ItemsJustify SelfAlign ContentAlign ItemsAlign SelfPlace ContentPlace ItemsPlace SelfTailwind CSS SpacingTailwind CSS simplifies spacing control for padding, margin, and space between elements.PaddingMarginSpace BetweenTailwind CSS SizingControl element sizes with Tailwind's utilities for width, height, and maximum/minimum sizes.WidthMin-WidthMax-WidthHeightMin-HeightMax-HeightTailwind CSS TypographyTailwind provides utilities to easily style text, including font sizes, weights, and line heights.Font FamilyFont SizeFont SmoothingFont StyleFont WeightFont Variant NumericLetter SpacingLine HeightList Style TypePlaceholder ColorPlaceholder OpacityText AlignmentText ColorText OpacityText DecorationText TransformVertical AlignmentWhitespaceWord BreakTailwind CSS BackgroundsTailwind's background utilities allow you to control backgrounds like images, colors, and gradients.Background ImageBackground ClipBackground ColorBackground OpacityBackground PositionBackground RepeatBackground SizeGradient Color StopsTailwind CSS BordersEasily customize borders with Tailwind's utilities for border color, radius, and width.Border RadiusBorder WidthBorder ColorBorder OpacityBorder StyleDivide WidthDivide ColorDivide OpacityDivide StyleRing WidthRing ColorRing OpacityRing Offset WidthRing Offset ColorTailwind CSS EffectsApply visual effects such as shadows and opacity to enhance your UI.Box ShadowOpacityTailwind CSS FiltersTailwind CSS provides utilities for applying CSS filters like blur, brightness, and contrast.FilterBlurBrightnessContrastDrop ShadowGrayscaleHue RotateInvertSaturateSepiaBackdrop FilterBackdrop BlurBackdrop BrightnessBackdrop ContrastBackdrop GrayscaleBackdrop Hue RotateBackdrop InvertBackdrop OpacityBackdrop SaturateBackdrop SepiaTailwind CSS TablesStyle tables easily with utilities that control layout and presentation.Border CollapseTable LayoutTailwind CSS Transitions and AnimationAdd smooth transitions and animations to your UI elements with Tailwind's utility classes.Transition PropertyTransition DurationTransition Timing FunctionTransition DelayTailwind CSS TransformsApply transformations such as scale, rotate, and translate with ease.TransformTransform OriginScaleRotateTranslateTailwind CSS InteractivityTailwind provides utilities for enhancing user interactivity, such as cursor style and pointer events.AppearanceCursorOutlinePointer EventsResizeSelectTailwind CSS SVGStyle SVG elements with utilities for fill, stroke, and stroke width.FillStrokeStroke WidthTailwind CSS for InterviewPrepare for your interviews with common questions related to Tailwind CSS.Tailwind CSS Interview Questions and AnswersTailwind CSS Exercises, Practice Questions and SolutionsAdvantages of Tailwind CSSFaster Development: Tailwind’s utility-first approach allows developers to style elements quickly without writing custom CSS for each element.Customizable: Tailwind is highly configurable. You can adjust everything, from colors and spacing to breakpoints and fonts, to suit your needs.No Unused CSS: With tools like PurgeCSS, unused CSS can be removed automatically, keeping your final CSS file size small and optimized.Easier to Maintain: Tailwind’s utility classes encourage consistent design throughout the project, making it easier to maintain.No Need for Custom CSS: Since you use predefined utility classes, you won’t need to write custom CSS for each element.Applications of Tailwind CSSWeb Development: Tailwind is perfect for creating custom designs quickly in web applications, websites, and landing pages.Responsive Websites: Easily create responsive layouts with Tailwind’s built-in classes for different screen sizes.Prototyping: Since Tailwind allows you to style directly in HTML, it’s great for prototyping designs without worrying about CSS.Component Libraries: Developers can build a consistent design system by creating reusable components, such as buttons, cards, and navigation bars.Complete ReferencesTailwind CSS is extensive and covers every aspect of UI design and layout.Tailwind CSS LayoutTailwind CSS FlexboxTailwind CSS GridTailwind CSS AlignmentTailwind CSS SpacingTailwind CSS SizingTailwind CSS TypographyTailwind CSS BackgroundsTailwind CSS BordersTailwind CSS EffectsTailwind CSS FiltersTailwind CSS TablesTailwind CSS Transitions and AnimationTailwind CSS TransformsTailwind CSS InteractivityTailwind CSS vs Other FrameworksTailwind CSS is a utility-first CSS framework that offers high flexibility for building custom designs. Let's compare it with other popular frameworks like Bootstrap and Bulma to understand their unique features and use cases.FeatureTailwind CSSBootstrapBulmaApproachUtility-first frameworkComponent-based frameworkFlexbox-based modular frameworkCustomizationHighly customizable via config fileLimited to theme variablesCustomizable via Sass variablesLearning CurveSteeper (must learn utility classes)Easier (ready-made components)Moderate (simpler than Tailwind)File SizeSmall when optimized with PurgeCSSLarger due to included componentsLightweight but not as minimalResponsivenessResponsive utilities for all elementsBuilt-in responsive grid systemFlexbox-based responsive gridComponentsNone included (build your own)Comprehensive component libraryBasic component setBest Use CaseCustom designs, design systemsRapid prototyping, admin dashboardsModern websites, simple projects Comment More infoAdvertise with us Next Article Introduction to Tailwind CSS kartik Follow Improve Article Tags : Web Technologies CSS Tailwind CSS Tutorials Web-Tech Tutorials +1 More 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