TailwindCSS

The concept of Preflight

Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.
When we import tailwindcss into our project, it gets auto applied.

1. Margins are removed - Preflight removes all of the default margins from all elements including headings, blockquotes, paragraphs, etc.

2. Border styles are reset - In order to make it easy to add a border by simply adding the border class, Tailwind overrides the default border styles for all elements.

3. Headings are unstyled - All heading elements are completely unstyled by default, and have the same font size and weight as normal text. It helps you avoid accidentally deviating from your type scale. In UI development, headings should often be visually de-emphasized.

4. Lists are unstyled - Ordered and unordered lists are unstyled by default, with no bullets or numbers.

5. Images are block-level - Images and other replaced elements (like svg, video, canvas, and others) are display: block by default.

6. Images are constrained - Images and videos are constrained to the parent width in a way that preserves their intrinsic aspect ratio. This prevents them from overflowing their containers and makes them responsive by default.

You can extend, modify or disable preflight as per your need. Read documentation for more.

Layout

1. Aspect-ratio - for controlling the aspect ratio of an element.

   • aspect-ratio = to give a specific ratio (like aspect-3/2)

   • aspect-video = to give a video aspect ration of 16/9

   • aspect-[<value>] = to give aspect ratio based on a custom value (like aspect-[calc(4*3+1)/3])

   • For responsive design, Prefix it with a breakpoint variant like md: or lg:

2. columns - for controlling the number of columns within an element.

   • columns-<number> = to set column based on number like columns-3 for 3columns

   • columns-<width size> = to set the column width(like columns-sm**)**

   • gap-<width> = to set the width between columns

   • columns-<custom value> = to set the columns based on a completely custom value( like columns-[30vw])

3. display - for controlling the display box type of an element.

   • Use the inline, inline-block, and block utilities to control the flow of text and elements.

   • Use the flow-root to create self-contained layout container that prevents floats, margins, and content from escaping or collapsing the parent.

   • Use the flex utility to create a block-level flex container.

   • Use the inline-flex utility to create an inline flex container that flows with text.

   • Use the grid utility to create a grid container.

   • Use the inline-grid utility to create an inline grid container.

   • Use the contents utility to create a "phantom" container whose children act like direct children of the parent.

   • Use the table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utilities to create elements that behave like their respective table elements.

   • Use the hidden utility to remove an element from the document.

   • Use sr-only to hide an element visually without hiding it from screen readers.

   • Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers.

4. overflow - for controlling how an element handles content that is too large for the container.

   • Use the overflow-visible utility to show content that overflows.

   • Use the overflow-hidden utility to hide content that overflows.

   • Use the overflow-auto utility to add scrollbars to an element in the event that its content overflows the bounds of that element.

   • Unlike overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.

   • Use the overflow-x-auto utility to allow horizontal scrolling if needed.

   • Use the overflow-y-auto utility to allow vertical scrolling if needed.

   • Use the overflow-x-scroll utility to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system.

5. overscroll-behaviour - for controlling how the browser behaves when reaching the boundary of a scrolling area.

   • Use the overscroll-contain utility to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve "bounce" effects when scrolling past the end of the container in operating systems that support it.

   • Use the overscroll-none utility to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent "bounce" effects when scrolling past the end of the container.

   • Use the overscroll-auto utility to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area.

6. position - for controlling how an element is positioned in the document.

   • Use the static utility to position an element according to the normal flow of the document.

   • Use the relative utility to position an element according to the normal flow of the document.

   • Use the absolute utility to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.

   • Use the fixed utility to position an element relative to the browser window.

   • Use the sticky utility to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.

7. float - for controlling the wrapping of content around an element.

   • Use the float-right utility to float an element to the right of its container.

   • Use the float-left utility to float an element to the left of its container.

   • Use the float-start and float-end utilities, which use logical properties to map to either the left or right side based on the text direction.

   • Use the float-none utility to reset any floats that are applied to an element.

8. top/right/bottom/left - for controlling the placement of positioned elements.

   • Use top-<number>, right-<number>, bottom-<number>, left-<number>, and inset-<number> utilities like top-0 and bottom-4 to set the horizontal or vertical position of a positioned element.

   • To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value.

   • Use start-<number> or end-<number> utilities like start-0 and end-4 to set the inset-inline-start and inset-inline-end logical properties, which map to either the left or right side based on the text direction.

   • Use utilities like inset-[<value>] and top-[<value>] to set the position based on a completely custom value.

9. visibility - for controlling the visibility of an element.

   • Use the invisible utility to hide an element, but still maintain its place in the document, affecting the layout of other elements.

   • Use the collapse utility to hide table rows, row groups, columns, and column groups as if they were set to display: none, but without impacting the size of other rows and columns.

   • Use the visible utility to make an element visible.

10. z-index - for controlling the stack order of an element.

    • Use the z-<number> utilities like z-10 and z-50 to control the stack order (or three-dimensional positioning) of an element, regardless of the order it has been displayed.

    • To use a negative z-index value, prefix the class name with a dash to convert it to a negative value.

    • Use the z-[<value>] syntax to set the stack order based on a completely custom value (like z-[calc(var(--index)+1)] ).

11. clear - for controlling the wrapping of content around an element.

    • Use the clear-left utility to position an element below any preceding left-floated elements.

    • Use the clear-right utility to position an element below any preceding right-floated elements.

    • Use the clear-both utility to position an element below all preceding floated elements.

    • Use the clear-start and clear-end utilities, which use logical properties to map to either the left or right side based on the text direction.

    • Use the clear-none utility to reset any clears that are applied to an element.

12. object-fit - for controlling how a replaced element's content should be resized.

    • Use the object-cover utility to resize an element's content to cover its container:

    • Use the object-contain utility to resize an element's content to stay contained within its container.

    • Use the object-fill utility to stretch an element's content to fit its container.

    • Use the object-scale-down utility to display an element's content at its original size but scale it down to fit its container if necessary.

    • Use the object-none utility to display an element's content at its original size ignoring the container size.

13. object-position - for controlling how a replaced element's content should be positioned within its container. Use utilities like object-left and object-bottom-right to specify how a replaced element's content should be positioned within its container. Use the object-[<value>] syntax to set the object position based on a completely custom value (like object-[25%_75%] ).

14. break-after - for controlling how a column or page should break after an element.

15. break-before - for controlling how a column or page should break before an element.

16. break-inside -for controlling how a column or page should break within an element.

17. box-decoration-break - Use the box-decoration-slice and box-decoration-clone utilities to control whether properties like background, border, border-image, box-shadow, clip-path, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks.

18. box-sizing - for controlling how the browser should calculate an element's total size.

    • Use the box-border utility to set an element's box-sizing to border-box, telling the browser to include the element's borders and padding when you give it a height or width. Tailwind makes this the default for all elements in our preflight base styles.

    • Use the box-content utility to set an element's box-sizing to content-box, telling the browser to add borders and padding on top of the element's specified width or height.

19. isolation - for controlling whether an element should explicitly create a new stacking context.
    Use the isolate and isolation-auto utilities to control whether an element should explicitly create a new stacking context.

Flexbox

1. flex-direction - for controlling the direction of flex items.

   • Use flex-row to position flex items horizontally in the same direction as text.

   • Use flex-row-reverse to position flex items horizontally in the opposite direction.

   • Use flex-col to position flex items vertically.

   • Use flex-col-reverse to position flex items vertically in the opposite direction.

2. flex-wrap - for controlling how flex items wrap.

   • Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.

   • Use flex-wrap to allow flex items to wrap.

   • Use flex-wrap-reverse to wrap flex items in the reverse direction.

3. flex - for controlling how flex items both grow and shrink.

   • Use flex-<number> utilities like flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size.

   • Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size.

   • Use flex-auto to allow a flex item to grow and shrink, taking into account its initial size.

   • Use flex-none to prevent a flex item from growing or shrinking.

   • Use the flex-[<value>] syntax to set the flex shorthand property based on a completely custom value (like flex-[3_1_auto] ).

4. justify-content - for controlling how flex and grid items are positioned along a container's main axis.

   • Use the justify-start utility to justify items against the start of the container's main axis.

   • Use the justify-center or justify-center-safe utilities to justify items along the center of the container's main axis.

   • Use the justify-end or justify-end-safe utilities to justify items against the end of the container's main axis.

   • Use the justify-between utility to justify items along the container's main axis such that there is an equal amount of space between each item.

   • Use the justify-around utility to justify items along the container's main axis such that there is an equal amount of space on each side of each item.

   • Use the justify-evenly utility to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using justify-around .

   • Use the justify-stretch utility to allow auto-sized content items to fill the available space along the container's main axis.

   • Use the justify-normal utility to pack content items in their default position as if no justify-content value was set.

5. flex-basis - for controlling the initial size of flex items.

   • Use basis-<number> utilities like basis-64 and basis-128 to set the initial size of flex items based on the spacing scale.

   • Use utilities like basis-xs and basis-sm to set the initial size of flex items based on the container scale.

   • Use basis-<fraction> utilities like basis-1/2 and basis-2/3 to set the initial size of flex items.

   • Use the basis-[<value>] syntax to set the basis based on a completely custom value.

6. flex-grow - for controlling how flex items grow.

   • Use grow to allow a flex item to grow to fill any available space.

   • Use grow-<number> utilities like grow-3 to make flex items grow proportionally based on their growth factor, allowing them to fill the available space relative to each other.

   • Use grow-0 to prevent a flex item from growing.

   • Use the grow-[<value>] syntax to set the flex grow factor based on a completely custom value.

7. flex-shrink - for controlling how flex items shrink.

   • Use shrink to allow a flex item to shrink if needed.

   • Use shrink-0 to prevent a flex item from shrinking.

   • Use the shrink-[<value>] syntax to set the flex shrink factor based on a completely custom value.

Grid

1. grid-template-columns - for specifying the columns in a grid layout.

   • Use grid-cols-<number> utilities like grid-cols-2 and grid-cols-4 to create grids with n equally sized columns.

   • Use the grid-cols-subgrid utility to adopt the column tracks defined by the item's parent.

   • Use the grid-cols-[<value>] syntax to set the columns based on a completely custom value.

2. grid-column - for controlling how elements are sized and placed across grid columns.

   • Use col-span-<number> utilities like col-span-2 and col-span-4 to make an element span n columns space.

   • Use col-start-<number> or col-end-<number> utilities like col-start-2 and col-end-3 to make an element start or end at the nth grid line.

   • Use utilities like col-[<value>],col-span-[<value>],col-start-[<value>], and col-end-[<value>] to set the grid column size and location based on a completely custom value.

3. grid-template-rows - for specifying the rows in a grid layout.

   • Use grid-rows-<number> utilities like grid-rows-2 and grid-rows-4 to create grids with n equally sized rows.

   • Use the grid-rows-subgrid utility to adopt the row tracks defined by the item's parent.

   • Use the grid-rows-[<value>] syntax to set the rows based on a completely custom value.

4. grid-row - for controlling how elements are sized and placed across grid rows.

   • Use row-span-<number> utilities like row-span-2 and row-span-4 to make an element span n rows space.

   • Use row-start-<number> or row-end-<number> utilities like row-start-2 and row-end-3 to make an element start or end at the nth grid line.

   • Use utilities like row-[<value>],row-span-[<value>],row-start-[<value>], and row-end-[<value>] to set the grid row size and location based on a completely custom value.

5. justify-items - for controlling how grid items are aligned along their inline axis.

   • Use the justify-items-start utility to justify grid items against the start of their inline axis.

   • Use the justify-items-end or justify-items-end-safe utilities to justify grid items against the end of their inline axis.

   • Use the justify-items-center or justify-items-center-safe utilities to justify grid items against the end of their inline axis.

   • Use the justify-items-stretch utility to stretch items along their inline axis.

6. justify-self - for controlling how an individual grid item is aligned along its inline axis.

   • Use the justify-self-auto utility to align an item based on the value of the grid's justify-items property.

   • Use the justify-self-start utility to align a grid item to the start of its inline axis.

   • Use the justify-self-center or justify-self-center-safe utilities to align a grid item along the center of its inline axis.

   • Use the justify-self-end or justify-self-end-safe utilities to align a grid item to the end of its inline axis.

   • Use the justify-self-stretch utility to stretch a grid item to fill the grid area on its inline axis.

7. place-items - for controlling how items are justified and aligned at the same time.

   • Use place-items-start to place grid items on the start of their grid areas on both axes.

   • Use place-items-end to place grid items on the end of their grid areas on both axes.

   • Use place-items-center to place grid items on the center of their grid areas on both axes.

   • Use place-items-stretch to stretch items along their grid areas on both axes.

8. place-self - for controlling how an individual item is justified and aligned at the same time.

   • Use place-self-auto to align an item based on the value of the container's place-items property.

   • Use place-self-start to align an item to the start on both axes.

   • Use place-self-center to align an item at the center on both axes.

   • Use place-self-end to align an item to the end on both axes.

   • Use place-self-stretch to stretch an item on both axes.

9. grid-auto-flow - for controlling how elements in a grid are auto-placed.

   • Use utilities like grid-flow-col and grid-flow-row-dense to control how the auto-placement algorithm works for a grid layout.

   • | Tailwind Class | Meaning | | --- | --- | | grid-flow-row | Fill rows left → right | | grid-flow-col | Fill columns top → bottom | | grid-flow-dense | Pack items tightly | | grid-flow-row-dense | Row flow + tight packing | | grid-flow-col-dense | Column flow + tight packing |

   • Without dense → keep order, allow gaps
     With dense → fill gaps like Tetris

10. grid-auto-columns - for controlling how wide automatically generated grid columns become when content overflows or columns aren’t predefined.

11. grid-auto-rows - for controlling how wide automatically generated grid rows become when content overflows or rows aren’t predefined.

Flexbox & Grid Commons

self = works at individual level

items and context = works at group level

justify = grid

align = flex & grid both

1. order - for controlling the order of flex and grid items.

   • Use order-<number> utilities like order-1 and order-3 to render flex and grid items in a different order than they appear in the document.

   • Use the order-first and order-last utilities to render flex and grid items first or last.

   • To use a negative order value, prefix the class name with a dash to convert it to a negative value.

   • Use the order-[<value>] syntax to set the order based on a completely custom value.

2. gap - for controlling gap between grid and flexbox items.

   • Use gap-<number> utilities like gap-2 and gap-4 to change the gap between both rows and columns in grid and flexbox layouts.

   • Use gap-x-<number> or gap-y-<number> utilities like gap-x-8 and gap-y-4 to change the gap between columns and rows independently.

   • Use utilities like gap-[<value>],gap-x-[<value>], and gap-y-[<value>] to set the gap based on a completely custom value.

3. align-content - for controlling how rows are positioned in multi-row flex and grid containers(x-axis).

   • Use content-start to pack rows in a container against the start of the cross axis.

   • Use content-center to pack rows in a container in the center of the cross axis.

   • Use content-end to pack rows in a container against the end of the cross axis.

   • Use content-between to distribute rows in a container such that there is an equal amount of space between each line.

   • Use content-around to distribute rows in a container such that there is an equal amount of space around each line.

   • Use content-evenly to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around .

   • Use content-stretch to allow content items to fill the available space along the container’s cross axis.

   • Use content-normal to pack content items in their default position as if no align-content value was set.

4. align-items - Utilities for controlling how flex and grid items are positioned along a container's cross axis(x-axis).

   • Use the items-stretch utility to stretch items to fill the container's cross axis.

   • Use the items-start utility to align items to the start of the container's cross axis.

   • Use the items-center utility to align items along the center of the container's cross axis.

   • Use the items-end utility to align items to the end of the container's cross axis.

   • Use the items-baseline utility to align items along the container's cross axis such that all of their baselines align.

5. align-self - for controlling how an individual flex or grid item is positioned along its container's cross axis.

   • Use the self-auto utility to align an item based on the value of the container's align-items property.

   • Use the self-start utility to align an item to the start of the container's cross axis, despite the container's align-items value.

   • Use the self-center utility to align an item along the center of the container's cross axis, despite the container's align-items value.

   • Use the self-end utility to align an item to the end of the container's cross axis, despite the container's align-items value.

   • Use the self-stretch utility to stretch an item to fill the container's cross axis, despite the container's align-items value.

   • Use the self-baseline utility to align an item such that its baseline aligns with the baseline of the flex container's cross axis.

   • Use the self-baseline-last utility to align an item along the container's cross axis such that its baseline aligns with the last baseline in the container.

6. place-content - for controlling how content is justified and aligned at the same time.

   • Use place-content-center to pack items in the center of the inline and block axes.

   • Use place-content-start to pack items against the start of the inline and block axes.

   • Use place-content-end to pack items against the end of the inline and block axes.

   • Use place-content-between to distribute grid items along the inline and block axes so that there is an equal amount of space between each row and column on each axis respectively.

   • Use place-content-around to distribute grid items along the inline and block axes so that there is an equal amount of space around each row and column on each axis respectively.

   • Use place-content-evenly to distribute grid items such that they are evenly spaced on the inline and block axes.

   • Use place-content-stretch to stretch grid items along their grid areas on the inline and block axes.

Spacing & Sizing

1. padding - for controlling an element's padding.

   • Use p-<number> utilities like p-4 and p-8 to control the padding on all sides of an element.

   • Use pt-<number>, pr-<number>, pb-<number>, and pl-<number> utilities like pt-6 and pr-4 to control the padding on one side of an element.

   • Use px-<number> utilities like px-4 and px-8 to control the horizontal padding of an element.

   • Use py-<number> utilities like py-4 and py-8 to control the vertical padding of an element.

   • Using logical properties - Use ps-<number> or pe-<number> utilities like ps-4 and pe-8 to set the padding-inline-start and padding-inline-end logical properties, which map to either the left or right side based on the text direction.

   • Use utilities like p-[<value>],px-[<value>], and pb-[<value>] to set the padding based on a completely custom value.

2. margin - for controlling an element's margin.

   • Use m-<number> utilities like m-4 and m-8 to control the margin on all sides of an element.

   • Use mt-<number>, mr-<number>, mb-<number>, and ml-<number> utilities like ml-2 and mt-6 to control the margin on one side of an element.

   • Use mx-<number> utilities like mx-4 and mx-8 to control the horizontal margin of an element.

   • Use my-<number> utilities like my-4 and my-8 to control the vertical margin of an element.

   • To use a negative margin value, prefix the class name with a dash to convert it to a negative value.

   • Using logical properties - Use ms-<number> or me-<number> utilities like ms-4 and me-8 to set the margin-inline-start and margin-inline-end logical properties.

   • Adding space between children - Use space-x-<number> or space-y-<number> utilities like space-x-4 and space-y-8 to control the space between elements.

   • Reversing children order - If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element.

   • Use utilities like m-[<value>],mx-[<value>], and mb-[<value>] to set the margin based on a completely custom value.

3. width - for setting the width of an element.

   • Use w-<number> utilities like w-24 and w-64 to set an element to a fixed width based on the spacing scale.

   • Use w-full or w-<fraction> utilities like w-1/2 and w-2/5 to give an element a percentage-based width.

   • Use utilities like w-sm and w-xl to set an element to a fixed width based on the container scale.

   • Matching the viewport - Use the w-screen utility to make an element span the entire width of the viewport.

   • Resetting the width - Use the w-auto utility to remove an element's assigned width under a specific condition, like at a particular breakpoint.

   • Setting both width and height - Use utilities like size-px, size-4, and size-full to set both the width and height of an element at the same time.

   • Use the w-[<value>] syntax to set the width based on a completely custom value.

4. min-width - for setting the minimum width of an element.

   • Use min-w-<number> utilities like min-w-24 and min-w-64 to set an element to a fixed minimum width based on the spacing scale.

   • Use min-w-full or min-w-<fraction> utilities like min-w-1/2 and min-w-2/5 to give an element a percentage-based minimum width.

   • Use utilities like min-w-sm and min-w-xl to set an element to a fixed minimum width based on the container scale.

   • Use the min-w-[<value>] syntax to set the minimum width based on a completely custom value.

5. max-width - for setting the maximum width of an element.

   • Use max-w-<number> utilities like max-w-24 and max-w-64 to set an element to a fixed maximum width based on the spacing scale.

   • Use max-w-full or max-w-<fraction> utilities like max-w-1/2 and max-w-2/5 to give an element a percentage-based maximum width.

   • Use utilities like max-w-sm and max-w-xl to set an element to a fixed maximum width based on the container scale.

   • Use the max-w-[<value>] syntax to set the maximum width based on a completely custom value.

6. height - for setting the height of an element.

   • Use h-<number> utilities like h-24 and h-64 to set an element to a fixed height based on the spacing scale.

   • Use h-full or h-<fraction> utilities like h-1/2 and h-2/5 to give an element a percentage-based height.

   • Use the h-screen utility to make an element span the entire height of the viewport.

   • For dynamic viewport - Use the h-dvh utility to make an element span the entire height of the viewport, which changes as the browser UI expands or contracts.

   • For large viewport - Use the h-lvh utility to set an element's height to the largest possible height of the viewport.

   • For small viewport - Use the h-svh utility to set an element's height to the smallest possible height of the viewport.

   • Use utilities like size-px, size-4, and size-full to set both the width and height of an element at the same time.

   • Use the h-[<value>] syntax to set the height based on a completely custom value.

7. min-height - for setting the minimum height of an element.

   • Use min-h-<number> utilities like min-h-24 and min-h-64 to set an element to a fixed minimum height based on the spacing scale.

   • Use min-h-full or min-h-<fraction> utilities like min-h-1/2, and min-h-2/5 to give an element a percentage-based minimum height.

   • Use the min-h-[<value>] syntax to set the minimum height based on a completely custom value.

8. max-height - setting the maximum height of an element.

   • Use max-h-<number> utilities like max-h-24 and max-h-64 to set an element to a fixed maximum height based on the spacing scale.

   • Use max-h-full or max-h-<fraction> utilities like max-h-1/2 and max-h-2/5 to give an element a percentage-based maximum height.

   • Use the max-h-[<value>] syntax to set the maximum height based on a completely custom value.

Typography

1. font-family - for controlling the font family of an element like font-sans .

2. font-size - for controlling the font size of an element like text-sm. Use utilities like text-sm/6 and text-lg/7 to set the font size and line-height of an element at the same time.

3. font-style - for controlling the style of text. Use the italic utility to make text italic and not-italic utility to display text normally.

4. font-weight - for controlling the font weight of an element. Use utilities like font-thin and font-bold to set the font weight of an element.

5. text-align - for controlling the alignment of text. Use the text-left utility to left align the text of an element, similarly, use text-center, text-right, text-start, text-end, text-justify.

6. color - for controlling the text color of an element. Use utilities like text-blue-600 and text-blue-600/25 (color opacity modifier to control the text color opacity of an element).
   Prefix a color utility with a variant like hover:* to only apply the utility in that state.

7. text-transform - for controlling the capitalization of text. Like uppercase, lowercase, capitalize or normal-case.

8. text-wrap - for controlling how text wraps within an element. Use the text-wrap utility to wrap overflowing text onto multiple lines at logical points in the text. Use the text-nowrap utility to prevent text from wrapping, allowing it to overflow if necessary. Use the text-balance utility to distribute the text evenly across each line.

9. text-indent - for controlling the amount of empty space shown before text in a block. Use indent-<number> utilities like indent-2 and indent-8 to set the amount of empty space (indentation) that's shown before text in a block. For using a negative value, just use - before the utility.

10. text-decoration-line - for controlling the decoration of text. Use the overline utility to add an overline to the text of an element, Use the no-underline utility to remove a line from the text of an element, Use the underline utility to add an underline, Use the line-through utility to add a line through the text of an element. Prefix a text-decoration-line utility with a variant like hover:* to only apply the utility in that state.

11. list-style-position - for controlling the position of bullets and numbers in lists. Use utilities like list-inside and list-outside to control the position of the markers and text indentation in a list.

12. list-style-type - for controlling the marker style of a list. Use utilities like list-disc and list-decimal to control the style of the markers in a list.

13. white-space - for controlling an element's white-space property.

14. font-variant-numeric - for controlling the variant of numbers.

15. line-clamp - for cutting long text after a fixed number of lines and adds ..., use line-clamp-<number> .

16. line-height - for controlling the leading, or line height, of an element. Use leading-<number> utilities like leading-6 and leading-7 to set the line height of an element independent of the font-size or Use the leading-none utility to set the line height of an element equal to its font size.

Backgrounds

1. background-attachment - for controlling how a background image behaves when scrolling.

   • Use the bg-fixed utility to fix the background image relative to the viewport.

   • Use the bg-local utility to scroll the background image with the container and the viewport.

   • Use the bg-scroll utility to scroll the background image with the viewport, but not with the container.

2. background-clip - for controlling where the background color or image is allowed to appear inside a box.

   • bg-clip-border - Background fills everything — content, padding, and under the border.

   • bg-clip-padding - Background fills content + padding, but NOT the border.

   • bg-clip-content - Background fills ONLY the content area**.**

   • bg-clip-text - Background is visible ONLY inside the text**.**

3. background-color - for controlling an element's background color.

   • Use utilities like bg-white, bg-indigo-500 and bg-transparent to control the background color of an element.

   • Use the color opacity modifier to control the opacity of an element's background color like bg-sky-500/100 .

   • Use the bg-[<value>] syntax to set the background color based on a completely custom value like bg-[#50d71e]

   • For CSS variables, you can also use the bg-(<custom-property>) syntax like bg-(--my-color).

   • Prefix a background-color utility with a variant like hover:* to only apply the utility in that state.

4. background-image - for controlling an element's background image.

   • Use the bg-[<value>] syntax to set the background image of an element like bg-[url(/img/mountains.jpg)]

   • Adding linear gradient - Use utilities like bg-linear-to-r and bg-linear-<angle> with the color stop utilities to add a linear gradient to an element like bg-linear-to-r from-cyan-500 to-blue-500.

   • Adding radical gradient - Use the bg-radial and bg-radial-[<position>] utilities with the color stop utilities to add a radial gradient to an element like bg-radial from-pink-400 from-40% to-fuchsia-700.

   • Adding conical gradient - Use the bg-conic and bg-conic-<angle> utilities with the color stop utilities to add a conic gradient to an element like bg-conic from-blue-600 to-sky-400 to-50%.

   • Setting gradient color stops - Use utilities like from-indigo-500, via-purple-500, and to-pink-500 to set the colors of the gradient stops like bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500

   • Setting gradient stop positions - Use utilities like from-10%, via-30%, and to-90% to set more precise positions for the gradient color stops like bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%.

   • Changing interpolation mode - Use the interpolation modifier to control the interpolation mode of a gradient. By default gradients are interpolated in the oklab color space.

   • Use the bg-none utility to remove an existing background image from an element.

5. background-origin - for controlling how an element's background is positioned relative to borders, padding, and content.

   • bg-origin-border - Background starts from the outer border edge (Covers border + padding + content).

   • bg-origin-padding - Background starts inside the border (Covers padding + content).

   • bg-origin-content - Background starts only inside the content area (Covers content only).

6. background-position - for controlling the position of an element's background image. Use utilities like bg-center, bg-right, and bg-top-left to control the position of an element's background image.

7. background-repeat - for controlling the repetition of an element's background image.

   • Use the bg-repeat utility to repeat the background image both vertically and horizontally.

   • Use the bg-repeat-x utility to only repeat the background image horizontally.

   • Use the bg-repeat-y utility to only repeat the background image vertically.

   • Use the bg-repeat-space utility to repeat the background image without clipping.

   • Use the bg-repeat-round utility to repeat the background image without clipping, stretching if needed to avoid gaps.

   • Use the bg-no-repeat utility to prevent a background image from repeating.

8. background-size - for controlling the background size of an element's background image.

   • filling the container - Use the bg-cover utility to scale the background image until it fills the background layer, cropping the image if needed.

   • filling without cropping - Use the bg-contain utility to scale the background image to the outer edges without cropping or stretching.

   • using default size - Use the bg-auto utility to display the background image at its default size.

   • using custom value - Use the bg-size-[<value>] syntax to set the background size based on a completely custom value like bg-size-[auto_100px].

Borders

1. border-radius - for controlling the border radius of an element.

   • Use utilities like rounded-sm and rounded-md to apply different border radius sizes to an element.

   • Rounding sides separately - Use utilities like rounded-t-md and rounded-r-lg to only round one side of an element.

   • Rounding corners separately - Use utilities like rounded-tr-md and rounded-tl-lg utilities to only round one corner of an element.

   • Creating pill button - Use the rounded-full utility to create pill buttons.

   • Removing the border radius - Use the rounded-none utility to remove an existing border radius from an element.

   • Using custom value - Use the rounded-[<value>] syntax to set the border radius based on a completely custom value like rounded-[2vw].

2. border-width - for controlling the width of an element's borders.

   • Use border or border-<number> utilities like border-2 and border-4 to set the border width for all sides of an element.

   • Individual sides - Use utilities like border-r and border-t-4 to set the border width for one side of an element.

   • Horizontal and vertical sides - Use utilities like border-x and border-y-4 to set the border width on two sides of an element at the same time.

   • Between children - Use utilities like divide-x and divide-y-4 to add borders between child elements.

   • Using custom value - Use the border-[<value>] syntax to set the border width based on a completely custom value like border-[2vw].

3. border-color - for controlling the color of an element's borders.

• Use utilities like border-rose-500 and border-lime-100 to control the border color of an element.

• Changing the opacity - Use the color opacity modifier to control the opacity of an element's border color like border-indigo-500/100.

• Individual sides - Use utilities like border-t-indigo-500 and border-r-lime-100 to set the border color for one side of an element.

• Horizontal and Vertical sides - Use utilities like border-x-indigo-500 and border-y-lime-100 to set the border color on two sides of an element at the same time.

• Between children - Use utilities like divide-indigo-500 and divide-lime-100 to control the border color between child elements.

• Using custom value - Use the border-[<value>] syntax to set the border color based on a completely custom value like border-[#243c5a].

• Applying on focus - Prefix a border-color utility with a variant like focus:* to only apply the utility in that state like focus:border-pink-600.

4. border-style - for controlling the style of an element's borders.

   • Use utilities like border-solid,border-dashed,border-double and border-dotted to control an element's border style.

   • Removing border - Use the border-none utility to remove an existing border from an element.

   • Between children - Use utilities like divide-dashed and divide-dotted to control the border style between child elements.

5. outline-width - for controlling the width of an element's outline.

• Use outline or outline-<number> utilities like outline-2 and outline-4 to set the width of an element's outline.

• Prefix an outline-width utility with a variant like focus:* to only apply the utility in that state.

• Use the outline-[<value>] syntax to set the outline width based on a completely custom value like outline-[2vw].

6. outline-color - for controlling the color of an element's outline.

   • Use utilities like outline-rose-500 and outline-lime-100 to control the color of an element's outline.

   • Changing the opacity - Use the color opacity modifier to control the opacity of an element's outline color.

   • Using custom value - Use the outline-[<value>] syntax to set the outline color based on a completely custom value.

7. outline-style - for controlling the style of an element's outline.

   • Use utilities like outline-solid,outline-dashed,outline-double and outline-dashed to set the style of an element's outline.

   • Use the outline-hidden utility to hide the default browser outline on focused elements, while still preserving the outline in forced colors mode.

   • Use the outline-none utility to completely remove the default browser outline on focused elements.

8. outline-offset - for adding space between the element and its outline.

   • Use utilities like outline-offset-2 and outline-offset-4 to change the offset of an element's outline.

   • Use the outline-offset-[<value>] syntax to set the outline offset based on a completely custom value like outline-offset-[2vw].

Effects

1. box-shadow - for controlling the box shadow of an element.

   • Use utilities like shadow-sm and shadow-lg to apply different sized outer box shadows to an element.

   • Changing the opacity - Use the opacity modifier to adjust the opacity of the box shadow like shadow-xl/20.

   • Setting the shadow color - Use utilities like shadow-indigo-500 and shadow-cyan-500/50 to change the color of a box shadow.

   • Adding an insert shadow - Use utilities like inset-shadow-xs and inset-shadow-sm to apply an inset box shadow to an element.

   • Setting the insert shadow cUse inset-ring or inset-ring-<number> utilities like inset-ring-2 and inset-ring-4 to apply a solid inset box-shadow to an elemenolor - Use utilities like inset-shadow-indigo-500 and inset-shadow-cyan-500/50 to change the color of an inset box shadow.

   • Adding a ring - Use ring or ring-<number> utilities like ring-2 and ring-4 to apply a solid box-shadow to an element.

   • Setting the ring color - Use utilities like ring-indigo-500 and ring-cyan-500/50 to change the color of a ring.

   • Adding an inset ring - Use inset-ring or inset-ring-<number> utilities like inset-ring-2 and inset-ring-4 to apply a solid inset box-shadow to an element.

   • Adding inset ring color - Use utilities like inset-ring-indigo-500 and inset-ring-cyan-500/50 to change the color of an inset ring.

   • Remove the shadow - Use the shadow-none, inset-shadow-none,ring-0, and inset-ring-0 utilities to remove an existing box shadow from an element.

   • Using custom value - Use utilities like shadow-[<value>],inset-shadow-[<value>],ring-[<value>], and inset-ring-[<value>] to set the box shadow based on a completely custom value like shadow-[0_35px_35px_rgba(0,0,0,0.25)].

2. text-shadow - for controlling the shadow of a text element.

• Use utilities like text-shadow-sm and shadow-lg to apply different sized text shadows to a text element.

• Changing the opacity - Use the opacity modifier to adjust the opacity of the text shadow.

• Setting shadow color - Use utilities like text-shadow-indigo-500 and text-shadow-cyan-500/50 to change the color of a text shadow.

• Removing text shadow - Use the text-shadow-none utility to remove an existing text shadow from an element.

• Using custom value - Use the text-shadow-[<value>] syntax to set the text shadow based on a completely custom value like text-shadow-[0_35px_35px_rgb(0_0_0_/_0.25)].

3. opacity - for controlling the opacity of an element.

   • Use opacity-<number> utilities like opacity-25 and opacity-100 to set the opacity of an element.

   • Applying conditionally - Prefix an opacity utility with a variant like disabled:* to only apply the utility in that state.

   • Using custom value - Use the opacity-[<value>] syntax to set the opacity based on a completely custom value like opacity-[.67].

4. mix-blend-mode - for controlling how an element should blend with the background.

5. background-blend-mode - for controlling how an element's background image should blend with its background color.

6. mask-clip - for controlling how far a mask can hide or reveal content inside an element.

For all effects related to mask, prefer official documentation.

Filters

filter - for applying filters to an element.

• Use utilities like blur-xs and grayscale to apply filters to an element.

• You can combine the following filter utilities: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, and sepia.

• Use the filter-none utility to remove all of the filters applied to an element. Use the filter-[<value>] syntax to set the filter based on a completely custom value.

• Prefix a filter utility with a variant like hover:* to only apply the utility in that state.

1. blur - for applying blur filters to an element.
   Use utilities like blur-sm and blur-lg to blur an element. Use the blur-[<value>] syntax to set the blur based on a completely custom value like blur-[2px].

2. brightness - for applying brightness filters to an element.
   Use utilities like brightness-50 and brightness-100 to control an element's brightness. Use the brightness-[<value>] syntax to set the brightness based on a completely custom value like brightness-[1.75].

3. contrast - for applying contrast filters to an element. Use utilities like contrast-50 and contrast-100 to control an element's contrast. Use the contrast-[<value>] syntax to set the contrast based on a completely custom value like contrast-[.25].

Similarly you can use other filters, refer documentation for more.

backdrop-filter - for applying backdrop filters to an element. It affects the background behind the element. All CSS utilities work exactly the same the text got replaced from filter to backdrop-filter.

Transitions and Animations

Transitions = smooth change between states (hover, focus, active)
Animations = continuous or repeating motion over time

Think:

• Transition → reacts to user interaction

• Animation → runs on its own timeline

1. transition-property - for controlling which CSS properties transition.

   • Use utilities like transition and transition-colors to specify which properties should transition when they change.

   • Supporting reduced motions - For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the motion-safe and motion-reduce variants.

   • Using custom value - Use the transition-[<value>] syntax to set the transition properties based on a completely custom value.

2. transition-behavior - to control the behavior of CSS transitions.
   Use the transition-discrete utility to start transitions when changing properties with a discrete set of values, such as elements that change from hidden to block.

3. transition-duration - for controlling the duration of CSS transitions.
   Use utilities like duration-150 and duration-700 to set the transition duration of an element in milliseconds.

4. transition-timing-function - for controlling the easing of CSS transitions.
   Use utilities like ease-in and ease-out to control the easing curve of an element's transition.

5. transition-delay - for controlling the delay of CSS transitions.
   Use utilities like delay-150 and delay-700 to set the transition delay of an element in milliseconds.

6. animation - for animating elements with CSS animations.

   • Adding a spin animation - Use the animate-spin utility to add a linear spin animation to elements like loading indicators.

   • Adding a ping animation - Use the animate-ping utility to make an element scale and fade like a radar ping or ripple of water—useful for things like notification badges.

   • Adding a pulse animation - Use the animate-pulse utility to make an element gently fade in and out—useful for things like skeleton loaders.

   • Adding a bounce animation - Use the animate-bounce utility to make an element bounce up and down—useful for things like "scroll down" indicators.

Transforms

Transforms = moving, rotating, resizing, or tilting an element visually — without changing the page layout.

1. rotate - for rotating elements.

   • Use rotate-<number> utilities like rotate-45 and rotate-90 to rotate an element by degrees.

   • Using negative values - Use -rotate-<number> utilities like -rotate-45 and -rotate-90 to rotate an element counterclockwise by degrees.

   • Rotating in 3D spaces - Use rotate-x-<number>, rotate-y-<number>, and rotate-z-<number> utilities like rotate-x-50, -rotate-y-30, and rotate-z-45 together to rotate an element in 3D space.

2. scale - for scaling elements(Make elements bigger or smaller).

   • Use scale-<number> utilities like scale-75 and scale-150 to scale an element by a percentage of its original size.

   • Scaling on the x-axis - Use the scale-x-<number> utilities like scale-x-75 and -scale-x-150 to scale an element on the x-axis by a percentage of its original width.

   • Scaling on the y-axis - Use the scale-y-<number> utilities like scale-y-75 and scale-y-150 to scale an element on the y-axis by a percentage of its original height.

   • Using negative values - Use -scale-<number>, -scale-x-<number> or -scale-y-<number> utilities like -scale-x-75 and -scale-125 to mirror and scale down an element by a percentage of its original size.

3. skew - for skewing elements with transform(Tilt Diagonally).

   • Use skew-<number> utilities like skew-4 and skew-10 to skew an element on both axes.

   • Using negative values - Use -skew-<number> utilities like -skew-4 and -skew-10 to skew an element on both axes.

   • On x-axis - Use skew-x-<number> utilities like skew-x-4 and -skew-x-10 to skew an element on the x-axis.

   • On y-axis - Use skew-y-<number> utilities like skew-y-4 and -skew-y-10 to skew an element on the y-axis.

4. translate - for translating elements(Move left, right, up, or down).

   • Using spacing scale - Use translate-<number> utilities like translate-2 and -translate-4 to translate an element on both axes based on the spacing scale.

   • Using percentage scale - Use translate-<fraction> utilities like translate-1/4 and -translate-full to translate an element on both axes by a percentage of the element's size.

   • On x-axis axis - Use translate-x-<number> or translate-x-<fraction> utilities like translate-x-4 and translate-x-1/4 to translate an element on the x-axis.

   • On y-axis - Use translate-y-<number> or translate-y-<fraction> utilities like translate-y-6 and translate-y-1/3 to translate an element on the y-axis.

   • On z-axis - Use translate-z-<number> utilities like translate-z-6 and -translate-z-12 to translate an element on the z-axis.

5. transform - for transforming elements.

   • Hardware acceleration - If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the transform-gpu utility.

   • Use the transform-cpu utility to force things back to the CPU if you need to undo this conditionally.

   • Removing transforms - Use the transform-none utility to remove all of the transforms on an element at once.

6. transform-origin - for specifying the origin for an element's transformations.
   Use utilities like origin-top and origin-bottom-left to set an element's transform origin.

7. transform-style - for controlling if an elements children are placed in 3D space.
   Use transform-3d to position children in 3D space.

Interactivity

1. accent-color - for controlling the accented color of a form control.

   • Setting the accent color - Use utilities like accent-rose-500 and accent-lime-600 to change the accent color of an element. This is helpful for styling elements like checkboxes and radio groups by overriding the browser's default color.

   • Changing the opacity - Use the color opacity modifier to control the opacity of an element's accent color. Setting the accent color opacity has limited browser-support and only works in Firefox at this time.

   • Using custom value - Use the accent-[<value>] syntax to set the accent color based on a completely custom value like accent-[#50d71e].

   • Applying on hover - Prefix an accent-color utility with a variant like hover:* to only apply the utility in that state.

2. appearance - for suppressing native form control styling.

   • Removing default appearance - Use appearance-none to reset any browser specific styling on an element.

   • Restoring default appearance - Use appearance-auto to restore the default browser specific styling on an element.

3. caret-color - for controlling the color of the text input cursor.

   • Use utilities like caret-rose-500 and caret-lime-600 to change the color of the text input cursor.

   • Using custom value - Use the caret-[<value>] syntax to set the caret color based on a completely custom value like caret-[#50d71e].

4. color-schema - for controlling the color scheme of an element.

   • Use utilities like scheme-light and scheme-light-dark to control how element should be rendered.

   • Applying in dark mode - Prefix a color-scheme utility with a variant like dark:* to only apply the utility in that state.

5. cursor - for controlling the cursor style when hovering over an element.
   Use utilities like cursor-pointer and cursor-grab to control which cursor is displayed when hovering over an element.

6. field-sizing - for controlling the sizing of form controls.

   • Sizing based on content - Use the field-sizing-content utility to allow a form control to adjust it's size based on the content.

   • Using fixed size - Use the field-sizing-fixed utility to make a form control use a fixed size.

7. pointer-events - for controlling whether an element responds to pointer events.

   • Ignoring pointer events - Use the pointer-events-none utility to make an element ignore pointer events, like :hover and click events. The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.

   • Restoring pointer events - Use the pointer-events-auto utility to revert to the default browser behavior for pointer events.

8. resize - for controlling how an element can be resized.

   • Resizing in all directions - Use resize to make an element horizontally and vertically resizable.

   • Resizing vertically - Use resize-y to make an element vertically resizable.

   • Resizing horizontally - Use resize-x to make an element horizontally resizable.

   • Prevent resizing - Use resize-none to prevent an element from being resizable.

9. scroll-behavior - for controlling the scroll behavior of an element.

   • Using smooth scrolling - Use the scroll-smooth utility to enable smooth scrolling within an element. Setting the scroll-behavior only affects scroll events that are triggered by the browser.

   • Using normal scrolling - Use the scroll-auto utility to revert to the default browser behavior for scrolling.

10. scroll-margin - for controlling the scroll offset around items in a snap container.

    • Use the scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, and scroll-ml-<number> utilities like scroll-ml-4 and scroll-mt-6 to set the scroll offset around items within a snap container.

    • Using negative values - To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value.

    • Using custom value - Use utilities like scroll-ml-[<value>] and scroll-me-[<value>] to set the scroll margin based on a completely custom value.

11. scroll-padding - for controlling an element's scroll offset within a snap container.

    • Use the scroll-pt-<number>, scroll-pr-<number>, scroll-pb-<number>, and scroll-pl-<number> utilities like scroll-pl-4 and scroll-pt-6 to set the scroll offset of an element within a snap container.

    • Using negative values - To use a negative scroll padding value, prefix the class name with a dash to convert it to a negative value.

    • Using custom value - Use utilities like scroll-pl-[<value>] and scroll-pe-[<value>] to set the scroll padding based on a completely custom value like scroll-pl-[24rem].

12. scroll-snap-align - for controlling the scroll snap alignment of an element.

    • Snapping to the center - Use the snap-center utility to snap an element to its center when being scrolled inside a snap container.

    • Snapping to the start - Use the snap-start utility to snap an element to its start when being scrolled inside a snap container.

    • Snapping to the end - Use the snap-end utility to snap an element to its end when being scrolled inside a snap container.

13. scroll-snap-stop - for controlling whether you can skip past possible snap positions.

    • Forcing snap-position stops - Use the snap-always utility together with the snap-mandatory utility to force a snap container to always stop on an element before the user can continue scrolling to the next item.

    • Skipping snap-position stops - Use the snap-normal utility to allow a snap container to skip past possible scroll snap positions.

14. scroll-snap-type - for controlling how strictly snap points are enforced in a snap container.

15. touch-action - for controlling how an element can be scrolled and zoomed on touchscreens.

    Use utilities like touch-pan-y and touch-pinch-zoom to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens

16. user-select - for controlling whether the user can select text in an element.

    • Disabling text selection - Use the select-none utility to prevent selecting text in an element and its children.

    • Allowing text selection - Use the select-text utility to allow selecting text in an element and its children.

    • Selecting all text in one click - Use the select-all utility to automatically select all the text in an element when a user clicks.

    • Using auto select behavior - Use the select-auto utility to use the default browser behavior for selecting text.

17. will-change - for optimizing upcoming animations of elements that are expected to change.