Tailwind CSS is changing the game in web design with its utility-first approach, enabling devs to style applications right in the HTML using a wide range of predefined classes. In this article, we’ll dive into the practical benefits of using Tailwind by classes, sharing real-world examples and actionable tips for implementation. Whether you’re an experienced dev or just starting out, adopting this method can simplify your styling process and make your projects more efficient.
Below this code block are a list of links and resources to check out.
/* ******************************************************************************************* * TAILWIND.CSS * DOCUMENTATION: https://tailwindcss.com/ * ******************************************************************************************* */ /* * Available breakpoints * -------------------- * sm: min-width: 640px; * md: min-width: 768px; * lg: min-width: 1024px; * xl: min-width: 1280px; */ /* ******************************************************************************************* * LAYOUT * ******************************************************************************************* */ /* * Container * -------------------- * A component for fixing an element's width to the current breakpoint. */ .container /* * Box-sizing * -------------------- * Utilities for controlling how the browser should calculate an element's total size. * By default, only responsive variants are generated for box-sizing utilities. */ .box-border /* box-sizing: border-box; */ .box-content /* box-sizing: content-box; */ /* * Display * -------------------- * Utilities for controlling the display box type of an element. * By default, only responsive variants are generated for display utilities. */ .hidden /* display: none; */ .block /* display: block; */ .inline-block /* display: inline-block; */ .inline /* display: inline; */ .flex /* display: flex; */ .inline-flex /* display: inline-flex; */ .grid /* display: grid; */ .table /* display: table; */ .table-caption /* display: table-caption; */ .table-cell /* display: table-cell; */ .table-column /* display: table-column; */ .table-column-group /* display: table-column-group; */ .table-footer-group /* display: table-footer-group; */ .table-header-group /* display: table-header-group; */ .table-row-group /* display: table-row-group; */ .table-row /* display: table-row; */ /* * Floats * -------------------- * Utilities for controlling the wrapping of content around an element. * By default, only responsive variants are generated for float utilities. */ .float-right /* float: right; */ .float-left /* float: left; */ .float-none /* float: none; */ .clearfix /* &::after { content: ""; display: table; clear: both; } */ /* * Clear * -------------------- * Utilities for controlling the wrapping of content around an element. * By default, only responsive variants are generated for clear utilities. */ .clear-left /* clear: left; */ .clear-right /* clear: right; */ .clear-both /* clear: both; */ /* * Object Fit * -------------------- * Utilities for controlling how a replaced element's content should be resized. * By default, only responsive variants are generated for object-fit utilities. */ .object-contain /* object-fit: contain; */ .object-cover /* object-fit: cover; */ .object-fill /* object-fit: fill; */ .object-none /* object-fit: none; */ .object-scale-down /* object-fit: scale-down; */ /* * Object Position * -------------------- * Utilities for controlling how a replaced element's content should be positioned within its container. * By default, only responsive variants are generated for object position utilities. */ .object-bottom /* object-position: bottom; */ .object-center /* object-position: center; */ .object-left /* object-position: left; */ .object-left-bottom /* object-position: left bottom; */ .object-left-top /* object-position: left top; */ .object-right /* object-position: right; */ .object-right-bottom /* object-position: right bottom; */ .object-right-top /* object-position: right top; */ .object-top /* object-position: top; */ /* * Overflow * -------------------- * Utilities for controlling how an element handles content that is too large for the container. * By default, only responsive variants are generated for overflow utilities. */ .overflow-auto /* overflow: auto; */ .overflow-hidden /* overflow: hidden; */ .overflow-visible /* overflow: visible; */ .overflow-scroll /* overflow: scroll; */ .overflow-x-auto /* overflow-x: auto; */ .overflow-y-auto /* overflow-y: auto; */ .overflow-x-hidden /* overflow-x: hidden; */ .overflow-y-hidden /* overflow-y: hidden; */ .overflow-x-visible /* overflow-x: visible; */ .overflow-y-visible /* overflow-y: visible; */ .overflow-x-scroll /* overflow-x: scroll; */ .overflow-y-scroll /* overflow-y: scroll; */ .scrolling-touch /* -webkit-overflow-scrolling: touch; */ .scrolling-auto /* -webkit-overflow-scrolling: auto; */ /* * Position * -------------------- * Utilities for controlling how an element is positioned in the DOM. * By default, only responsive variants are generated for position utilities. */ .static /* position: static; */ .fixed /* position: fixed; */ .absolute /* position: absolute; */ .relative /* position: relative; */ .sticky /* position: sticky; */ /* * Top / Right / Bottom / Left * -------------------- * Utilities for controlling the placement of positioned elements. * By default, only responsive variants are generated for top, right, bottom, left, and inset utilities. */ .inset-0 /* top: 0; right: 0; bottom: 0; left: 0; */ .inset-y-0 /* top: 0; bottom: 0; */ .inset-x-0 /* right: 0; left: 0; */ .top-0 /* top: 0; */ .right-0 /* right: 0; */ .bottom-0 /* bottom: 0; */ .left-0 /* left: 0; */ .inset-auto /* top: auto; right: auto; bottom: auto; left: auto; */ .inset-y-auto /* top: auto; bottom: auto; */ .inset-x-auto /* left: auto; right: auto; */ .top-auto /* top: auto; */ .bottom-auto /* bottom: auto; */ .left-auto /* left: auto; */ .right-auto /* right: auto; */ /* * Visibility * -------------------- * Utilities for controlling the visibility of an element. * By default, only responsive variants are generated for visibility utilities. */ .visible /* visibility: visible; */ .invisible /* visibility: hidden; */ /* * Z-Index * -------------------- * Utilities for controlling the stack order of an element. * By default, only responsive variants are generated for z-index utilities. */ .z-0 /* z-index: 0; */ .z-10 /* z-index: 10; */ .z-20 /* z-index: 20; */ .z-30 /* z-index: 30; */ .z-40 /* z-index: 40; */ .z-50 /* z-index: 50; */ .z-auto /* z-index: auto; */ /* ******************************************************************************************* * FLEXBOX * ******************************************************************************************* */ .flex /* display: flex; */ .inline-flex /* display: inline-flex; */ /* * Flex Direction * -------------------- * Utilities for controlling the direction of flex items. * By default, only responsive variants are generated for flex-direction utilities. */ .flex-row /* flex-direction: row; */ .flex-row-reverse /* flex-direction: row-reverse; */ .flex-col /* flex-direction: column; */ .flex-col-reverse /* flex-direction: column-reverse; */ /* * Flex Wrap * -------------------- * Utilities for controlling how flex items wrap. * By default, only responsive variants are generated for flex-wrap utilities. */ .flex-no-wrap /* flex-wrap: nowrap; */ .flex-wrap /* flex-wrap: wrap; */ .flex-wrap-reverse /* flex-wrap: wrap-reverse; */ /* * Align Items * -------------------- * Utilities for controlling how flex items are positioned along a container's cross axis. * By default, only responsive variants are generated for align-items utilities. */ .items-stretch /* align-items: stretch; */ .items-start /* align-items: flex-start; */ .items-center /* align-items: center; */ .items-end /* align-items: flex-end; */ .items-baseline /* align-items: baseline; */ /* * Align Content * -------------------- * Utilities for controlling how lines are positioned in multi-line flex containers. * By default, only responsive variants are generated for align-content utilities. */ .content-start /* align-content: flex-start; */ .content-center /* align-content: center; */ .content-end /* align-content: flex-end; */ .content-between /* align-content: space-between; */ .content-around /* align-content: space-around; */ /* * Align Self * -------------------- * Utilities for controlling how an individual flex item is positioned along its container's cross axis. * By default, only responsive variants are generated for align-self utilities. */ .self-auto /* align-self: auto; */ .self-start /* align-self: flex-start; */ .self-center /* align-self: center; */ .self-end /* align-self: flex-end; */ .self-stretch /* align-self: stretch; */ /* * Justify Content * -------------------- * Utilities for controlling how flex items are positioned along a container's main axis. * By default, only responsive variants are generated for justify-content utilities. */ .justify-start /* justify-content: flex-start; */ .justify-center /* justify-content: center; */ .justify-end /* justify-content: flex-end; */ .justify-between /* justify-content: space-between; */ .justify-around /* justify-content: space-around; */ /* * Flex * -------------------- * Utilities for controlling how flex items both grow and shrink. * By default, only responsive variants are generated for flex utilities. */ .flex-initial /* flex: 0 1 auto; */ .flex-1 /* flex: 1 1 0%; */ .flex-auto /* flex: 1 1 auto; */ .flex-none /* flex: none; */ /* * Flex Grow * -------------------- * Utilities for controlling how flex items grow. * By default, only responsive variants are generated for flex grow utilities. */ .flex-grow /* flex-grow: 1; */ .flex-grow-0 /* flex-grow: 0; */ /* * Flex Shrink * -------------------- * Utilities for controlling how flex items shrink. * By default, only responsive variants are generated for flex shrink utilities. */ .flex-shrink /* flex-shrink: 1; */ .flex-shrink-0 /* flex-shrink: 0; */ /* * Order * -------------------- * Utilities for controlling the order of flex items. * By default, only responsive variants are generated for order utilities. */ .order-first /* order: -9999; */ .order-last /* order: 9999; */ .order-none /* order: 0; */ .order-1 /* order: 1; */ .order-2 /* order: 2; */ .order-3 /* order: 3; */ .order-4 /* order: 4; */ .order-5 /* order: 5; */ .order-6 /* order: 6; */ .order-7 /* order: 7; */ .order-8 /* order: 8; */ .order-9 /* order: 9; */ .order-10 /* order: 10; */ .order-11 /* order: 11; */ .order-12 /* order: 12; */ /* ******************************************************************************************* * GRID * ******************************************************************************************* */ .grid /* display: grid; */ /* * Grid Template Columns * -------------------- * Utilities for specifying the columns in a grid layout. * By default, only responsive variants are generated for grid-template-columns utilities. */ .grid-cols-1 /* grid-template-columns: repeat(1, minmax(0, 1fr)); */ .grid-cols-2 /* grid-template-columns: repeat(2, minmax(0, 1fr)); */ .grid-cols-3 /* grid-template-columns: repeat(3, minmax(0, 1fr)); */ .grid-cols-4 /* grid-template-columns: repeat(4, minmax(0, 1fr)); */ .grid-cols-5 /* grid-template-columns: repeat(5, minmax(0, 1fr)); */ .grid-cols-6 /* grid-template-columns: repeat(6, minmax(0, 1fr)); */ .grid-cols-7 /* grid-template-columns: repeat(7, minmax(0, 1fr)); */ .grid-cols-8 /* grid-template-columns: repeat(8, minmax(0, 1fr)); */ .grid-cols-9 /* grid-template-columns: repeat(9, minmax(0, 1fr)); */ .grid-cols-10 /* grid-template-columns: repeat(10, minmax(0, 1fr)); */ .grid-cols-11 /* grid-template-columns: repeat(11, minmax(0, 1fr)); */ .grid-cols-12 /* grid-template-columns: repeat(12, minmax(0, 1fr)); */ .grid-cols-none /* grid-template-columns: none; */ /* * Grid Column Start / End * -------------------- * Utilities for controlling how elements are sized and placed across grid columns. * By default, only responsive variants are generated for grid-column utilities. */ .col-auto /* grid-column: auto; */ .col-span-1 /* grid-column: span 1 / span 1; */ .col-span-2 /* grid-column: span 2 / span 2; */ .col-span-3 /* grid-column: span 3 / span 3; */ .col-span-4 /* grid-column: span 4 / span 4; */ .col-span-5 /* grid-column: span 5 / span 5; */ .col-span-6 /* grid-column: span 6 / span 6; */ .col-span-7 /* grid-column: span 7 / span 7; */ .col-span-8 /* grid-column: span 8 / span 8; */ .col-span-9 /* grid-column: span 9 / span 9; */ .col-span-10 /* grid-column: span 10 / span 10; */ .col-span-11 /* grid-column: span 11 / span 11; */ .col-span-12 /* grid-column: span 12 / span 12; */ .col-start-1 /* grid-column-start: 1; */ .col-start-2 /* grid-column-start: 2; */ .col-start-3 /* grid-column-start: 3; */ .col-start-4 /* grid-column-start: 4; */ .col-start-5 /* grid-column-start: 5; */ .col-start-6 /* grid-column-start: 6; */ .col-start-7 /* grid-column-start: 7; */ .col-start-8 /* grid-column-start: 8; */ .col-start-9 /* grid-column-start: 9; */ .col-start-10 /* grid-column-start: 10; */ .col-start-11 /* grid-column-start: 11; */ .col-start-12 /* grid-column-start: 12; */ .col-start-13 /* grid-column-start: 13; */ .col-start-auto /* grid-column-start: auto; */ .col-end-1 /* grid-column-end: 1; */ .col-end-2 /* grid-column-end: 2; */ .col-end-3 /* grid-column-end: 3; */ .col-end-4 /* grid-column-end: 4; */ .col-end-5 /* grid-column-end: 5; */ .col-end-6 /* grid-column-end: 6; */ .col-end-7 /* grid-column-end: 7; */ .col-end-8 /* grid-column-end: 8; */ .col-end-9 /* grid-column-end: 9; */ .col-end-10 /* grid-column-end: 10; */ .col-end-11 /* grid-column-end: 11; */ .col-end-12 /* grid-column-end: 12; */ .col-end-13 /* grid-column-end: 13; */ .col-end-auto /* grid-column-end: auto; */ /* * Grid Template Rows * -------------------- * Utilities for specifying the rows in a grid layout. * By default, only responsive variants are generated for grid-template-rows utilities. */ .grid-rows-1 /* grid-template-rows: repeat(1, minmax(0, 1fr)); */ .grid-rows-2 /* grid-template-rows: repeat(2, minmax(0, 1fr)); */ .grid-rows-3 /* grid-template-rows: repeat(3, minmax(0, 1fr)); */ .grid-rows-4 /* grid-template-rows: repeat(4, minmax(0, 1fr)); */ .grid-rows-5 /* grid-template-rows: repeat(5, minmax(0, 1fr)); */ .grid-rows-6 /* grid-template-rows: repeat(6, minmax(0, 1fr)); */ .grid-rows-none /* grid-template-rows: none; */ /* * Grid Row Start / End * -------------------- * Utilities for controlling how elements are sized and placed across grid rows. * By default, only responsive variants are generated for grid-row utilities. */ .row-auto /* grid-row: auto; */ .row-span-1 /* grid-row: span 1 / span 1; */ .row-span-2 /* grid-row: span 2 / span 2; */ .row-span-3 /* grid-row: span 3 / span 3; */ .row-span-4 /* grid-row: span 4 / span 4; */ .row-span-5 /* grid-row: span 5 / span 5; */ .row-span-6 /* grid-row: span 6 / span 6; */ .row-start-1 /* grid-row-start: 1; */ .row-start-2 /* grid-row-start: 2; */ .row-start-3 /* grid-row-start: 3; */ .row-start-4 /* grid-row-start: 4; */ .row-start-5 /* grid-row-start: 5; */ .row-start-6 /* grid-row-start: 6; */ .row-start-7 /* grid-row-start: 7; */ .row-start-auto /* grid-row-start: auto; */ .row-end-1 /* grid-row-end: 1; */ .row-end-2 /* grid-row-end: 2; */ .row-end-3 /* grid-row-end: 3; */ .row-end-4 /* grid-row-end: 4; */ .row-end-5 /* grid-row-end: 5; */ .row-end-6 /* grid-row-end: 6; */ .row-end-7 /* grid-row-end: 7; */ .row-end-auto /* grid-row-end: auto; */ /* * Gap * -------------------- * Utilities for controlling gutters between grid rows and columns. * By default, no responsive, hover, focus, active, or group-hover variants are generated for gap utilities. */ .gap-0 /* gap: 0; */ .gap-1 /* gap: 0.25rem; */ .gap-2 /* gap: 0.5rem; */ .gap-3 /* gap: 0.75rem; */ .gap-4 /* gap: 1rem; */ .gap-5 /* gap: 1.25rem; */ .gap-6 /* gap: 1.5rem; */ .gap-8 /* gap: 2rem; */ .gap-10 /* gap: 2.5rem; */ .gap-12 /* gap: 3rem; */ .gap-16 /* gap: 4rem; */ .gap-20 /* gap: 5rem; */ .gap-24 /* gap: 6rem; */ .gap-32 /* gap: 8rem; */ .gap-40 /* gap: 10rem; */ .gap-48 /* gap: 12rem; */ .gap-56 /* gap: 14rem; */ .gap-64 /* gap: 16rem; */ .gap-px /* gap: 1px; */ .row-gap-0 /* row-gap: 0; */ .row-gap-1 /* row-gap: 0.25rem; */ .row-gap-2 /* row-gap: 0.5rem; */ .row-gap-3 /* row-gap: 0.75rem; */ .row-gap-4 /* row-gap: 1rem; */ .row-gap-5 /* row-gap: 1.25rem; */ .row-gap-6 /* row-gap: 1.5rem; */ .row-gap-8 /* row-gap: 2rem; */ .row-gap-10 /* row-gap: 2.5rem; */ .row-gap-12 /* row-gap: 3rem; */ .row-gap-16 /* row-gap: 4rem; */ .row-gap-20 /* row-gap: 5rem; */ .row-gap-24 /* row-gap: 6rem; */ .row-gap-32 /* row-gap: 8rem; */ .row-gap-40 /* row-gap: 10rem; */ .row-gap-48 /* row-gap: 12rem; */ .row-gap-56 /* row-gap: 14rem; */ .row-gap-64 /* row-gap: 16rem; */ .row-gap-px /* row-gap: 1px; */ .col-gap-0 /* column-gap: 0; */ .col-gap-1 /* column-gap: 0.25rem; */ .col-gap-2 /* column-gap: 0.5rem; */ .col-gap-3 /* column-gap: 0.75rem; */ .col-gap-4 /* column-gap: 1rem; */ .col-gap-5 /* column-gap: 1.25rem; */ .col-gap-6 /* column-gap: 1.5rem; */ .col-gap-8 /* column-gap: 2rem; */ .col-gap-10 /* column-gap: 2.5rem; */ .col-gap-12 /* column-gap: 3rem; */ .col-gap-16 /* column-gap: 4rem; */ .col-gap-20 /* column-gap: 5rem; */ .col-gap-24 /* column-gap: 6rem; */ .col-gap-32 /* column-gap: 8rem; */ .col-gap-40 /* column-gap: 10rem; */ .col-gap-48 /* column-gap: 12rem; */ .col-gap-56 /* column-gap: 14rem; */ .col-gap-64 /* column-gap: 16rem; */ .col-gap-px /* column-gap: 1px; */ /* * Grid Auto Flow * -------------------- * Utilities for controlling how elements in a grid are auto-placed. * By default, only responsive variants are generated for grid-auto-flow utilities. */ .grid-flow-row /* grid-auto-flow: row; */ .grid-flow-col /* grid-auto-flow: column; */ .grid-flow-row-dense /* grid-auto-flow: row dense; */ .grid-flow-col-dense /* grid-auto-flow: column dense; */ /* ******************************************************************************************* * SPACING * ******************************************************************************************* */ /* * Padding * -------------------- * Utilities for controlling an element's padding. * By default, only responsive variants are generated for padding utilities. */ .p-0 /* padding: 0; */ .p-1 /* padding: 0.25rem; */ .p-2 /* padding: 0.5rem; */ .p-3 /* padding: 0.75rem; */ .p-4 /* padding: 1rem; */ .p-5 /* padding: 1.25rem; */ .p-6 /* padding: 1.5rem; */ .p-8 /* padding: 2rem; */ .p-10 /* padding: 2.5rem; */ .p-12 /* padding: 3rem; */ .p-16 /* padding: 4rem; */ .p-20 /* padding: 5rem; */ .p-24 /* padding: 6rem; */ .p-32 /* padding: 8rem; */ .p-40 /* padding: 10rem; */ .p-48 /* padding: 12rem; */ .p-56 /* padding: 14rem; */ .p-64 /* padding: 16rem; */ .p-px /* padding: 1px; */ .py-0 /* padding-top: 0; padding-bottom: 0; */ .py-1 /* padding-top: 0.25rem; padding-bottom: 0.25rem; */ .py-2 /* padding-top: 0.5rem; padding-bottom: 0.5rem; */ .py-3 /* padding-top: 0.75rem; padding-bottom: 0.75rem; */ .py-4 /* padding-top: 1rem; padding-bottom: 1rem; */ .py-5 /* padding-top: 1.25rem; padding-bottom: 1.25rem; */ .py-6 /* padding-top: 1.5rem; padding-bottom: 1.5rem; */ .py-8 /* padding-top: 2rem; padding-bottom: 2rem; */ .py-10 /* padding-top: 2.5rem; padding-bottom: 2.5rem; */ .py-12 /* padding-top: 3rem; padding-bottom: 3rem; */ .py-16 /* padding-top: 4rem; padding-bottom: 4rem; */ .py-20 /* padding-top: 5rem; padding-bottom: 5rem; */ .py-24 /* padding-top: 6rem; padding-bottom: 6rem; */ .py-32 /* padding-top: 8rem; padding-bottom: 8rem; */ .py-40 /* padding-top: 10rem; padding-bottom: 10rem; */ .py-48 /* padding-top: 12rem; padding-bottom: 12rem; */ .py-56 /* padding-top: 14rem; padding-bottom: 14rem; */ .py-64 /* padding-top: 16rem; padding-bottom: 16rem; */ .py-px /* padding-top: 1px; padding-bottom: 1px; */ .px-0 /* padding-right: 0; padding-left: 0; */ .px-1 /* padding-right: 0.25rem; padding-left: 0.25rem; */ .px-2 /* padding-right: 0.5rem; padding-left: 0.5rem; */ .px-3 /* padding-right: 0.75rem; padding-left: 0.75rem; */ .px-4 /* padding-right: 1rem; padding-left: 1rem; */ .px-5 /* padding-right: 1.25rem; padding-left: 1.25rem; */ .px-6 /* padding-right: 1.5rem; padding-left: 1.5rem; */ .px-8 /* padding-right: 2rem; padding-left: 2rem; */ .px-10 /* padding-right: 2.5rem; padding-left: 2.5rem; */ .px-12 /* padding-right: 3rem; padding-left: 3rem; */ .px-16 /* padding-right: 4rem; padding-left: 4rem; */ .px-20 /* padding-right: 5rem; padding-left: 5rem; */ .px-24 /* padding-right: 6rem; padding-left: 6rem; */ .px-32 /* padding-right: 8rem; padding-left: 8rem; */ .px-40 /* padding-right: 10rem; padding-left: 10rem; */ .px-48 /* padding-right: 12rem; padding-left: 12rem; */ .px-56 /* padding-right: 14rem; padding-left: 14rem; */ .px-64 /* padding-right: 16rem; padding-left: 16rem; */ .px-px /* padding-right: 1px; padding-left: 1px; */ .pt-0 /* padding-top: 0; */ .pt-1 /* padding-top: 0.25rem; */ .pt-2 /* padding-top: 0.5rem; */ .pt-3 /* padding-top: 0.75rem; */ .pt-4 /* padding-top: 1rem; */ .pt-5 /* padding-top: 1.25rem; */ .pt-6 /* padding-top: 1.5rem; */ .pt-8 /* padding-top: 2rem; */ .pt-10 /* padding-top: 2.5rem; */ .pt-12 /* padding-top: 3rem; */ .pt-16 /* padding-top: 4rem; */ .pt-20 /* padding-top: 5rem; */ .pt-24 /* padding-top: 6rem; */ .pt-32 /* padding-top: 8rem; */ .pt-40 /* padding-top: 10rem; */ .pt-48 /* padding-top: 12rem; */ .pt-56 /* padding-top: 14rem; */ .pt-64 /* padding-top: 16rem; */ .pt-px /* padding-top: 1px; */ .pr-0 /* padding-right: 0; */ .pr-1 /* padding-right: 0.25rem; */ .pr-2 /* padding-right: 0.5rem; */ .pr-3 /* padding-right: 0.75rem; */ .pr-4 /* padding-right: 1rem; */ .pr-5 /* padding-right: 1.25rem; */ .pr-6 /* padding-right: 1.5rem; */ .pr-8 /* padding-right: 2rem; */ .pr-10 /* padding-right: 2.5rem; */ .pr-12 /* padding-right: 3rem; */ .pr-16 /* padding-right: 4rem; */ .pr-20 /* padding-right: 5rem; */ .pr-24 /* padding-right: 6rem; */ .pr-32 /* padding-right: 8rem; */ .pr-40 /* padding-right: 10rem; */ .pr-48 /* padding-right: 12rem; */ .pr-56 /* padding-right: 14rem; */ .pr-64 /* padding-right: 16rem; */ .pr-px /* padding-right: 1px; */ .pb-0 /* padding-bottom: 0; */ .pb-1 /* padding-bottom: 0.25rem; */ .pb-2 /* padding-bottom: 0.5rem; */ .pb-3 /* padding-bottom: 0.75rem; */ .pb-4 /* padding-bottom: 1rem; */ .pb-5 /* padding-bottom: 1.25rem; */ .pb-6 /* padding-bottom: 1.5rem; */ .pb-8 /* padding-bottom: 2rem; */ .pb-10 /* padding-bottom: 2.5rem; */ .pb-12 /* padding-bottom: 3rem; */ .pb-16 /* padding-bottom: 4rem; */ .pb-20 /* padding-bottom: 5rem; */ .pb-24 /* padding-bottom: 6rem; */ .pb-32 /* padding-bottom: 8rem; */ .pb-40 /* padding-bottom: 10rem; */ .pb-48 /* padding-bottom: 12rem; */ .pb-56 /* padding-bottom: 14rem; */ .pb-64 /* padding-bottom: 16rem; */ .pb-px /* padding-bottom: 1px; */ .pl-0 /* padding-left: 0; */ .pl-1 /* padding-left: 0.25rem; */ .pl-2 /* padding-left: 0.5rem; */ .pl-3 /* padding-left: 0.75rem; */ .pl-4 /* padding-left: 1rem; */ .pl-5 /* padding-left: 1.25rem; */ .pl-6 /* padding-left: 1.5rem; */ .pl-8 /* padding-left: 2rem; */ .pl-10 /* padding-left: 2.5rem; */ .pl-12 /* padding-left: 3rem; */ .pl-16 /* padding-left: 4rem; */ .pl-20 /* padding-left: 5rem; */ .pl-24 /* padding-left: 6rem; */ .pl-32 /* padding-left: 8rem; */ .pl-40 /* padding-left: 10rem; */ .pl-48 /* padding-left: 12rem; */ .pl-56 /* padding-left: 14rem; */ .pl-64 /* padding-left: 16rem; */ .pl-px /* padding-left: 1px; */ /* * Margin * -------------------- * Utilities for controlling an element's margin. * By default, only responsive variants are generated for margin utilities. */ .m-0 /* margin: 0; */ .m-1 /* margin: 0.25rem; */ .m-2 /* margin: 0.5rem; */ .m-3 /* margin: 0.75rem; */ .m-4 /* margin: 1rem; */ .m-5 /* margin: 1.25rem; */ .m-6 /* margin: 1.5rem; */ .m-8 /* margin: 2rem; */ .m-10 /* margin: 2.5rem; */ .m-12 /* margin: 3rem; */ .m-16 /* margin: 4rem; */ .m-20 /* margin: 5rem; */ .m-24 /* margin: 6rem; */ .m-32 /* margin: 8rem; */ .m-40 /* margin: 10rem; */ .m-48 /* margin: 12rem; */ .m-56 /* margin: 14rem; */ .m-64 /* margin: 16rem; */ .m-auto /* margin: auto; */ .m-px /* margin: 1px; */ .-m-1 /* margin: -0.25rem; */ .-m-2 /* margin: -0.5rem; */ .-m-3 /* margin: -0.75rem; */ .-m-4 /* margin: -1rem; */ .-m-5 /* margin: -1.25rem; */ .-m-6 /* margin: -1.5rem; */ .-m-8 /* margin: -2rem; */ .-m-10 /* margin: -2.5rem; */ .-m-12 /* margin: -3rem; */ .-m-16 /* margin: -4rem; */ .-m-20 /* margin: -5rem; */ .-m-24 /* margin: -6rem; */ .-m-32 /* margin: -8rem; */ .-m-40 /* margin: -10rem; */ .-m-48 /* margin: -12rem; */ .-m-56 /* margin: -14rem; */ .-m-64 /* margin: -16rem; */ .-m-px /* margin: -1px; */ .my-0 /* margin-top: 0; margin-bottom: 0; */ .my-1 /* margin-top: 0.25rem; margin-bottom: 0.25rem; */ .my-2 /* margin-top: 0.5rem; margin-bottom: 0.5rem; */ .my-3 /* margin-top: 0.75rem; margin-bottom: 0.75rem; */ .my-4 /* margin-top: 1rem; margin-bottom: 1rem; */ .my-5 /* margin-top: 1.25rem; margin-bottom: 1.25rem; */ .my-6 /* margin-top: 1.5rem; margin-bottom: 1.5rem; */ .my-8 /* margin-top: 2rem; margin-bottom: 2rem; */ .my-10 /* margin-top: 2.5rem; margin-bottom: 2.5rem; */ .my-12 /* margin-top: 3rem; margin-bottom: 3rem; */ .my-16 /* margin-top: 4rem; margin-bottom: 4rem; */ .my-20 /* margin-top: 5rem; margin-bottom: 5rem; */ .my-24 /* margin-top: 6rem; margin-bottom: 6rem; */ .my-32 /* margin-top: 8rem; margin-bottom: 8rem; */ .my-40 /* margin-top: 10rem; margin-bottom: 10rem; */ .my-48 /* margin-top: 12rem; margin-bottom: 12rem; */ .my-56 /* margin-top: 14rem; margin-bottom: 14rem; */ .my-64 /* margin-top: 16rem; margin-bottom: 16rem; */ .my-auto /* margin-top: auto; margin-bottom: auto; */ .my-px /* margin-top: 1px; margin-bottom: 1px; */ .-my-1 /* margin-top: -0.25rem; margin-bottom: -0.25rem; */ .-my-2 /* margin-top: -0.5rem; margin-bottom: -0.5rem; */ .-my-3 /* margin-top: -0.75rem; margin-bottom: -0.75rem; */ .-my-4 /* margin-top: -1rem; margin-bottom: -1rem; */ .-my-5 /* margin-top: -1.25rem; margin-bottom: -1.25rem; */ .-my-6 /* margin-top: -1.5rem; margin-bottom: -1.5rem; */ .-my-8 /* margin-top: -2rem; margin-bottom: -2rem; */ .-my-10 /* margin-top: -2.5rem; margin-bottom: -2.5rem; */ .-my-12 /* margin-top: -3rem; margin-bottom: -3rem; */ .-my-16 /* margin-top: -4rem; margin-bottom: -4rem; */ .-my-20 /* margin-top: -5rem; margin-bottom: -5rem; */ .-my-24 /* margin-top: -6rem; margin-bottom: -6rem; */ .-my-32 /* margin-top: -8rem; margin-bottom: -8rem; */ .-my-40 /* margin-top: -10rem; margin-bottom: -10rem; */ .-my-48 /* margin-top: -12rem; margin-bottom: -12rem; */ .-my-56 /* margin-top: -14rem; margin-bottom: -14rem; */ .-my-64 /* margin-top: -16rem; margin-bottom: -16rem; */ .-my-px /* margin-top: -1px; margin-bottom: -1px; */ .mx-0 /* margin-right: 0; margin-left: 0; */ .mx-1 /* margin-right: 0.25rem; margin-left: 0.25rem; */ .mx-2 /* margin-right: 0.5rem; margin-left: 0.5rem; */ .mx-3 /* margin-right: 0.75rem; margin-left: 0.75rem; */ .mx-4 /* margin-right: 1rem; margin-left: 1rem; */ .mx-5 /* margin-right: 1.25rem; margin-left: 1.25rem; */ .mx-6 /* margin-right: 1.5rem; margin-left: 1.5rem; */ .mx-8 /* margin-right: 2rem; margin-left: 2rem; */ .mx-10 /* margin-right: 2.5rem; margin-left: 2.5rem; */ .mx-12 /* margin-right: 3rem; margin-left: 3rem; */ .mx-16 /* margin-right: 4rem; margin-left: 4rem; */ .mx-20 /* margin-right: 5rem; margin-left: 5rem; */ .mx-24 /* margin-right: 6rem; margin-left: 6rem; */ .mx-32 /* margin-right: 8rem; margin-left: 8rem; */ .mx-40 /* margin-right: 10rem; margin-left: 10rem; */ .mx-48 /* margin-right: 12rem; margin-left: 12rem; */ .mx-56 /* margin-right: 14rem; margin-left: 14rem; */ .mx-64 /* margin-right: 16rem; margin-left: 16rem; */ .mx-auto /* margin-right: auto; margin-left: auto; */ .mx-px /* margin-right: 1px; margin-left: 1px; */ .-mx-1 /* margin-right: -0.25rem; margin-left: -0.25rem; */ .-mx-2 /* margin-right: -0.5rem; margin-left: -0.5rem; */ .-mx-3 /* margin-right: -0.75rem; margin-left: -0.75rem; */ .-mx-4 /* margin-right: -1rem; margin-left: -1rem; */ .-mx-5 /* margin-right: -1.25rem; margin-left: -1.25rem; */ .-mx-6 /* margin-right: -1.5rem; margin-left: -1.5rem; */ .-mx-8 /* margin-right: -2rem; margin-left: -2rem; */ .-mx-10 /* margin-right: -2.5rem; margin-left: -2.5rem; */ .-mx-12 /* margin-right: -3rem; margin-left: -3rem; */ .-mx-16 /* margin-right: -4rem; margin-left: -4rem; */ .-mx-20 /* margin-right: -5rem; margin-left: -5rem; */ .-mx-24 /* margin-right: -6rem; margin-left: -6rem; */ .-mx-32 /* margin-right: -8rem; margin-left: -8rem; */ .-mx-40 /* margin-right: -10rem; margin-left: -10rem; */ .-mx-48 /* margin-right: -12rem; margin-left: -12rem; */ .-mx-56 /* margin-right: -14rem; margin-left: -14rem; */ .-mx-64 /* margin-right: -16rem; margin-left: -16rem; */ .-mx-px /* margin-right: -1px; margin-left: -1px; */ .mt-0 /* margin-top: 0; */ .mt-1 /* margin-top: 0.25rem; */ .mt-2 /* margin-top: 0.5rem; */ .mt-3 /* margin-top: 0.75rem; */ .mt-4 /* margin-top: 1rem; */ .mt-5 /* margin-top: 1.25rem; */ .mt-6 /* margin-top: 1.5rem; */ .mt-8 /* margin-top: 2rem; */ .mt-10 /* margin-top: 2.5rem; */ .mt-12 /* margin-top: 3rem; */ .mt-16 /* margin-top: 4rem; */ .mt-20 /* margin-top: 5rem; */ .mt-24 /* margin-top: 6rem; */ .mt-32 /* margin-top: 8rem; */ .mt-40 /* margin-top: 10rem; */ .mt-48 /* margin-top: 12rem; */ .mt-56 /* margin-top: 14rem; */ .mt-64 /* margin-top: 16rem; */ .mt-auto /* margin-top: auto; */ .mt-px /* margin-top: 1px; */ .-mt-1 /* margin-top: -0.25rem; */ .-mt-2 /* margin-top: -0.5rem; */ .-mt-3 /* margin-top: -0.75rem; */ .-mt-4 /* margin-top: -1rem; */ .-mt-5 /* margin-top: -1.25rem; */ .-mt-6 /* margin-top: -1.5rem; */ .-mt-8 /* margin-top: -2rem; */ .-mt-10 /* margin-top: -2.5rem; */ .-mt-12 /* margin-top: -3rem; */ .-mt-16 /* margin-top: -4rem; */ .-mt-20 /* margin-top: -5rem; */ .-mt-24 /* margin-top: -6rem; */ .-mt-32 /* margin-top: -8rem; */ .-mt-40 /* margin-top: -10rem; */ .-mt-48 /* margin-top: -12rem; */ .-mt-56 /* margin-top: -14rem; */ .-mt-64 /* margin-top: -16rem; */ .-mt-px /* margin-top: -1px; */ .mr-0 /* margin-right: 0; */ .mr-1 /* margin-right: 0.25rem; */ .mr-2 /* margin-right: 0.5rem; */ .mr-3 /* margin-right: 0.75rem; */ .mr-4 /* margin-right: 1rem; */ .mr-5 /* margin-right: 1.25rem; */ .mr-6 /* margin-right: 1.5rem; */ .mr-8 /* margin-right: 2rem; */ .mr-10 /* margin-right: 2.5rem; */ .mr-12 /* margin-right: 3rem; */ .mr-16 /* margin-right: 4rem; */ .mr-20 /* margin-right: 5rem; */ .mr-24 /* margin-right: 6rem; */ .mr-32 /* margin-right: 8rem; */ .mr-40 /* margin-right: 10rem; */ .mr-48 /* margin-right: 12rem; */ .mr-56 /* margin-right: 14rem; */ .mr-64 /* margin-right: 16rem; */ .mr-auto /* margin-right: auto; */ .mr-px /* margin-right: 1px; */ .-mr-1 /* margin-right: -0.25rem; */ .-mr-2 /* margin-right: -0.5rem; */ .-mr-3 /* margin-right: -0.75rem; */ .-mr-4 /* margin-right: -1rem; */ .-mr-5 /* margin-right: -1.25rem; */ .-mr-6 /* margin-right: -1.5rem; */ .-mr-8 /* margin-right: -2rem; */ .-mr-10 /* margin-right: -2.5rem; */ .-mr-12 /* margin-right: -3rem; */ .-mr-16 /* margin-right: -4rem; */ .-mr-20 /* margin-right: -5rem; */ .-mr-24 /* margin-right: -6rem; */ .-mr-32 /* margin-right: -8rem; */ .-mr-40 /* margin-right: -10rem; */ .-mr-48 /* margin-right: -12rem; */ .-mr-56 /* margin-right: -14rem; */ .-mr-64 /* margin-right: -16rem; */ .-mr-px /* margin-right: -1px; */ .mb-0 /* margin-bottom: 0; */ .mb-1 /* margin-bottom: 0.25rem; */ .mb-2 /* margin-bottom: 0.5rem; */ .mb-3 /* margin-bottom: 0.75rem; */ .mb-4 /* margin-bottom: 1rem; */ .mb-5 /* margin-bottom: 1.25rem; */ .mb-6 /* margin-bottom: 1.5rem; */ .mb-8 /* margin-bottom: 2rem; */ .mb-10 /* margin-bottom: 2.5rem; */ .mb-12 /* margin-bottom: 3rem; */ .mb-16 /* margin-bottom: 4rem; */ .mb-20 /* margin-bottom: 5rem; */ .mb-24 /* margin-bottom: 6rem; */ .mb-32 /* margin-bottom: 8rem; */ .mb-40 /* margin-bottom: 10rem; */ .mb-48 /* margin-bottom: 12rem; */ .mb-56 /* margin-bottom: 14rem; */ .mb-64 /* margin-bottom: 16rem; */ .mb-auto /* margin-bottom: auto; */ .mb-px /* margin-bottom: 1px; */ .-mb-1 /* margin-bottom: -0.25rem; */ .-mb-2 /* margin-bottom: -0.5rem; */ .-mb-3 /* margin-bottom: -0.75rem; */ .-mb-4 /* margin-bottom: -1rem; */ .-mb-5 /* margin-bottom: -1.25rem; */ .-mb-6 /* margin-bottom: -1.5rem; */ .-mb-8 /* margin-bottom: -2rem; */ .-mb-10 /* margin-bottom: -2.5rem; */ .-mb-12 /* margin-bottom: -3rem; */ .-mb-16 /* margin-bottom: -4rem; */ .-mb-20 /* margin-bottom: -5rem; */ .-mb-24 /* margin-bottom: -6rem; */ .-mb-32 /* margin-bottom: -8rem; */ .-mb-40 /* margin-bottom: -10rem; */ .-mb-48 /* margin-bottom: -12rem; */ .-mb-56 /* margin-bottom: -14rem; */ .-mb-64 /* margin-bottom: -16rem; */ .-mb-px /* margin-bottom: -1px; */ .ml-0 /* margin-left: 0; */ .ml-1 /* margin-left: 0.25rem; */ .ml-2 /* margin-left: 0.5rem; */ .ml-3 /* margin-left: 0.75rem; */ .ml-4 /* margin-left: 1rem; */ .ml-5 /* margin-left: 1.25rem; */ .ml-6 /* margin-left: 1.5rem; */ .ml-8 /* margin-left: 2rem; */ .ml-10 /* margin-left: 2.5rem; */ .ml-12 /* margin-left: 3rem; */ .ml-16 /* margin-left: 4rem; */ .ml-20 /* margin-left: 5rem; */ .ml-24 /* margin-left: 6rem; */ .ml-32 /* margin-left: 8rem; */ .ml-40 /* margin-left: 10rem; */ .ml-48 /* margin-left: 12rem; */ .ml-56 /* margin-left: 14rem; */ .ml-64 /* margin-left: 16rem; */ .ml-auto /* margin-left: auto; */ .ml-px /* margin-left: 1px; */ .-ml-1 /* margin-left: -0.25rem; */ .-ml-2 /* margin-left: -0.5rem; */ .-ml-3 /* margin-left: -0.75rem; */ .-ml-4 /* margin-left: -1rem; */ .-ml-5 /* margin-left: -1.25rem; */ .-ml-6 /* margin-left: -1.5rem; */ .-ml-8 /* margin-left: -2rem; */ .-ml-10 /* margin-left: -2.5rem; */ .-ml-12 /* margin-left: -3rem; */ .-ml-16 /* margin-left: -4rem; */ .-ml-20 /* margin-left: -5rem; */ .-ml-24 /* margin-left: -6rem; */ .-ml-32 /* margin-left: -8rem; */ .-ml-40 /* margin-left: -10rem; */ .-ml-48 /* margin-left: -12rem; */ .-ml-56 /* margin-left: -14rem; */ .-ml-64 /* margin-left: -16rem; */ .-ml-px /* margin-left: -1px; */ /* ******************************************************************************************* * SIZING * ******************************************************************************************* */ /* * Width * -------------------- * Utilities for setting the width of an element * By default, only responsive variants are generated for width utilities. */ .w-0 /* width: 0; */ .w-1 /* width: 0.25rem; */ .w-2 /* width: 0.5rem; */ .w-3 /* width: 0.75rem; */ .w-4 /* width: 1rem; */ .w-5 /* width: 1.25rem; */ .w-6 /* width: 1.5rem; */ .w-8 /* width: 2rem; */ .w-10 /* width: 2.5rem; */ .w-12 /* width: 3rem; */ .w-16 /* width: 4rem; */ .w-20 /* width: 5rem; */ .w-24 /* width: 6rem; */ .w-32 /* width: 8rem; */ .w-40 /* width: 10rem; */ .w-48 /* width: 12rem; */ .w-56 /* width: 14rem; */ .w-64 /* width: 16rem; */ .w-auto /* width: auto; */ .w-px /* width: 1px; */ .w-1/2 /* width: 50%; */ .w-1/3 /* width: 33.333333%; */ .w-2/3 /* width: 66.666667%; */ .w-1/4 /* width: 25%; */ .w-2/4 /* width: 50%; */ .w-3/4 /* width: 75%; */ .w-1/5 /* width: 20%; */ .w-2/5 /* width: 40%; */ .w-3/5 /* width: 60%; */ .w-4/5 /* width: 80%; */ .w-1/6 /* width: 16.666667%; */ .w-2/6 /* width: 33.333333%; */ .w-3/6 /* width: 50%; */ .w-4/6 /* width: 66.666667%; */ .w-5/6 /* width: 83.333333%; */ .w-1/12 /* width: 8.333333%; */ .w-2/12 /* width: 16.666667%; */ .w-3/12 /* width: 25%; */ .w-4/12 /* width: 33.333333%; */ .w-5/12 /* width: 41.666667%; */ .w-6/12 /* width: 50%; */ .w-7/12 /* width: 58.333333%; */ .w-8/12 /* width: 66.666667%; */ .w-9/12 /* width: 75%; */ .w-10/12 /* width: 83.333333%; */ .w-11/12 /* width: 91.666667%; */ .w-full /* width: 100%; */ .w-screen /* width: 100vw; */ /* * Min-Width * -------------------- * Utilities for setting the minimum width of an element * By default, only responsive variants are generated for min-width utilities. */ .min-w-0 /* min-width: 0; */ .min-w-full /* min-width: 100%; */ /* * Max-Width * -------------------- * Utilities for setting the maximum width of an element * By default, only responsive variants are generated for max-width utilities. */ .max-w-xs /* max-width: 20rem; */ .max-w-sm /* max-width: 24rem; */ .max-w-md /* max-width: 28rem; */ .max-w-lg /* max-width: 32rem; */ .max-w-xl /* max-width: 36rem; */ .max-w-2xl /* max-width: 42rem; */ .max-w-3xl /* max-width: 48rem; */ .max-w-4xl /* max-width: 56rem; */ .max-w-5xl /* max-width: 64rem; */ .max-w-6xl /* max-width: 72rem; */ .max-w-full /* max-width: 100%; */ .max-w-screen-sm /* max-width: 640px; */ .max-w-screen-md /* max-width: 768px; */ .max-w-screen-lg /* max-width: 1024px; */ .max-w-screen-xl /* max-width: 1280px; */ .max-w-none /* max-width: none; */ /* * Height * -------------------- * Utilities for setting the height of an element * By default, only responsive variants are generated for height utilities. */ .h-0 /* height: 0; */ .h-1 /* height: 0.25rem; */ .h-2 /* height: 0.5rem; */ .h-3 /* height: 0.75rem; */ .h-4 /* height: 1rem; */ .h-5 /* height: 1.25rem; */ .h-6 /* height: 1.5rem; */ .h-8 /* height: 2rem; */ .h-10 /* height: 2.5rem; */ .h-12 /* height: 3rem; */ .h-16 /* height: 4rem; */ .h-20 /* height: 5rem; */ .h-24 /* height: 6rem; */ .h-32 /* height: 8rem; */ .h-40 /* height: 10rem; */ .h-48 /* height: 12rem; */ .h-56 /* height: 14rem; */ .h-64 /* height: 16rem; */ .h-auto /* height: auto; */ .h-px /* height: 1px; */ .h-full /* height: 100%; */ .h-screen /* height: 100vh; */ /* * Min-Height * -------------------- * Utilities for setting the minimum height of an element * By default, only responsive variants are generated for min-height utilities. */ .min-h-0 /* min-height: 0; */ .min-h-full /* min-height: 100%; */ .min-h-screen /* min-height: 100vh; */ /* * Max-Height * -------------------- * Utilities for setting the maximum height of an element * By default, only responsive variants are generated for max-height utilities. */ .max-h-full /* max-height: 100%; */ .max-h-screen /* max-height: 100vh; */ /* ******************************************************************************************* * TYPOGRAPHY * ******************************************************************************************* */ /* * Font Family * -------------------- * Utilities for controlling the font family of an element. * By default, only responsive variants are generated for font family utilities. */ .font-sans /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */ .font-serif /* font-family: Georgia, Cambria, "Times New Roman", Times, serif; */ .font-mono /* font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */ /* * Font Size * -------------------- * Utilities for controlling the font size of an element. * By default, only responsive variants are generated for text sizing utilities. */ .text-xs /* font-size: .75rem; */ .text-sm /* font-size: .875rem; */ .text-base /* font-size: 1rem; */ .text-lg /* font-size: 1.125rem; */ .text-xl /* font-size: 1.25rem; */ .text-2xl /* font-size: 1.5rem; */ .text-3xl /* font-size: 1.875rem; */ .text-4xl /* font-size: 2.25rem; */ .text-5xl /* font-size: 3rem; */ .text-6xl /* font-size: 4rem; */ /* * Font Smoothing * -------------------- * Utilities for controlling the font smoothing of an element. * By default, only responsive variants are generated for font smoothing utilities. */ .antialiased /* -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */ .subpixel-antialiased /* -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; */ /* * Font Style * -------------------- * Utilities for controlling the style of text. * By default, only responsive variants are generated for font style utilities. */ .italic /* font-style: italic; */ .not-italic /* font-style: normal; */ /* * Font Weight * -------------------- * Utilities for controlling the font weight of an element. * By default, only responsive, hover and focus variants are generated for font weight utilities. */ .font-hairline /* font-weight: 100; */ .font-thin /* font-weight: 200; */ .font-light /* font-weight: 300; */ .font-normal /* font-weight: 400; */ .font-medium /* font-weight: 500; */ .font-semibold /* font-weight: 600; */ .font-bold /* font-weight: 700; */ .font-extrabold /* font-weight: 800; */ .font-black /* font-weight: 900; */ /* * Letter Spacing * -------------------- * Utilities for controlling the tracking (letter spacing) of an element. * By default, only responsive variants are generated for tracking utilities. */ .tracking-tighter /* letter-spacing: -0.05em; */ .tracking-tight /* letter-spacing: -0.025em; */ .tracking-normal /* letter-spacing: 0; */ .tracking-wide /* letter-spacing: 0.025em; */ .tracking-wider /* letter-spacing: 0.05em; */ .tracking-widest /* letter-spacing: 0.1em; */ /* * Line Height * -------------------- * Utilities for controlling the leading (line height) of an element. * By default, only responsive variants are generated for line height utilities. */ .leading-none /* line-height: 1; */ .leading-tight /* line-height: 1.25; */ .leading-snug /* line-height: 1.375; */ .leading-normal /* line-height: 1.5; */ .leading-relaxed /* line-height: 1.625; */ .leading-loose /* line-height: 2; */ .leading-3 /* line-height: .75rem; */ .leading-4 /* line-height: 1rem; */ .leading-5 /* line-height: 1.25rem; */ .leading-6 /* line-height: 1.5rem; */ .leading-7 /* line-height: 1.75rem; */ .leading-8 /* line-height: 2rem; */ .leading-9 /* line-height: 2.25rem; */ .leading-10 /* line-height: 2.5rem; */ /* * List Style Type * -------------------- * Utilities for controlling the bullet/number style of a list. * By default, only responsive variants are generated for list style type utilities. */ .list-none /* list-style-type: none; */ .list-disc /* list-style-type: disc; */ .list-decimal /* list-style-type: decimal; */ /* * List Style Position * -------------------- * Utilities for controlling the position of bullets/numbers in lists. * By default, only responsive variants are generated for list style position utilities. */ .list-inside /* list-style-position: inside; */ .list-outside /* list-style-position: outside; */ /* * Placeholder Color * -------------------- * Utilities for controlling the color of placeholder text. * By default, only responsive and focus variants are generated for placeholder color utilities. */ .placeholder-transparent /* ::placeholder { color: transparent; } */ .placeholder-black /* ::placeholder { color: #000; } */ .placeholder-white /* ::placeholder { color: #fff; } */ .placeholder-gray-100 /* ::placeholder { color: #f7fafc; } */ .placeholder-gray-200 /* ::placeholder { color: #edf2f7; } */ .placeholder-gray-300 /* ::placeholder { color: #e2e8f0; } */ .placeholder-gray-400 /* ::placeholder { color: #cbd5e0; } */ .placeholder-gray-500 /* ::placeholder { color: #a0aec0; } */ .placeholder-gray-600 /* ::placeholder { color: #718096; } */ .placeholder-gray-700 /* ::placeholder { color: #4a5568; } */ .placeholder-gray-800 /* ::placeholder { color: #2d3748; } */ .placeholder-gray-900 /* ::placeholder { color: #1a202c; } */ .placeholder-red-100 /* ::placeholder { color: #fff5f5; } */ .placeholder-red-200 /* ::placeholder { color: #fed7d7; } */ .placeholder-red-300 /* ::placeholder { color: #feb2b2; } */ .placeholder-red-400 /* ::placeholder { color: #fc8181; } */ .placeholder-red-500 /* ::placeholder { color: #f56565; } */ .placeholder-red-600 /* ::placeholder { color: #e53e3e; } */ .placeholder-red-700 /* ::placeholder { color: #c53030; } */ .placeholder-red-800 /* ::placeholder { color: #9b2c2c; } */ .placeholder-red-900 /* ::placeholder { color: #742a2a; } */ .placeholder-orange-100 /* ::placeholder { color: #fffaf0; } */ .placeholder-orange-200 /* ::placeholder { color: #feebc8; } */ .placeholder-orange-300 /* ::placeholder { color: #fbd38d; } */ .placeholder-orange-400 /* ::placeholder { color: #f6ad55; } */ .placeholder-orange-500 /* ::placeholder { color: #ed8936; } */ .placeholder-orange-600 /* ::placeholder { color: #dd6b20; } */ .placeholder-orange-700 /* ::placeholder { color: #c05621; } */ .placeholder-orange-800 /* ::placeholder { color: #9c4221; } */ .placeholder-orange-900 /* ::placeholder { color: #7b341e; } */ .placeholder-yellow-100 /* ::placeholder { color: #fffff0; } */ .placeholder-yellow-200 /* ::placeholder { color: #fefcbf; } */ .placeholder-yellow-300 /* ::placeholder { color: #faf089; } */ .placeholder-yellow-400 /* ::placeholder { color: #f6e05e; } */ .placeholder-yellow-500 /* ::placeholder { color: #ecc94b; } */ .placeholder-yellow-600 /* ::placeholder { color: #d69e2e; } */ .placeholder-yellow-700 /* ::placeholder { color: #b7791f; } */ .placeholder-yellow-800 /* ::placeholder { color: #975a16; } */ .placeholder-yellow-900 /* ::placeholder { color: #744210; } */ .placeholder-green-100 /* ::placeholder { color: #f0fff4; } */ .placeholder-green-200 /* ::placeholder { color: #c6f6d5; } */ .placeholder-green-300 /* ::placeholder { color: #9ae6b4; } */ .placeholder-green-400 /* ::placeholder { color: #68d391; } */ .placeholder-green-500 /* ::placeholder { color: #48bb78; } */ .placeholder-green-600 /* ::placeholder { color: #38a169; } */ .placeholder-green-700 /* ::placeholder { color: #2f855a; } */ .placeholder-green-800 /* ::placeholder { color: #276749; } */ .placeholder-green-900 /* ::placeholder { color: #22543d; } */ .placeholder-teal-100 /* ::placeholder { color: #e6fffa; } */ .placeholder-teal-200 /* ::placeholder { color: #b2f5ea; } */ .placeholder-teal-300 /* ::placeholder { color: #81e6d9; } */ .placeholder-teal-400 /* ::placeholder { color: #4fd1c5; } */ .placeholder-teal-500 /* ::placeholder { color: #38b2ac; } */ .placeholder-teal-600 /* ::placeholder { color: #319795; } */ .placeholder-teal-700 /* ::placeholder { color: #2c7a7b; } */ .placeholder-teal-800 /* ::placeholder { color: #285e61; } */ .placeholder-teal-900 /* ::placeholder { color: #234e52; } */ .placeholder-blue-100 /* ::placeholder { color: #ebf8ff; } */ .placeholder-blue-200 /* ::placeholder { color: #bee3f8; } */ .placeholder-blue-300 /* ::placeholder { color: #90cdf4; } */ .placeholder-blue-400 /* ::placeholder { color: #63b3ed; } */ .placeholder-blue-500 /* ::placeholder { color: #4299e1; } */ .placeholder-blue-600 /* ::placeholder { color: #3182ce; } */ .placeholder-blue-700 /* ::placeholder { color: #2b6cb0; } */ .placeholder-blue-800 /* ::placeholder { color: #2c5282; } */ .placeholder-blue-900 /* ::placeholder { color: #2a4365; } */ .placeholder-indigo-100 /* ::placeholder { color: #ebf4ff; } */ .placeholder-indigo-200 /* ::placeholder { color: #c3dafe; } */ .placeholder-indigo-300 /* ::placeholder { color: #a3bffa; } */ .placeholder-indigo-400 /* ::placeholder { color: #7f9cf5; } */ .placeholder-indigo-500 /* ::placeholder { color: #667eea; } */ .placeholder-indigo-600 /* ::placeholder { color: #5a67d8; } */ .placeholder-indigo-700 /* ::placeholder { color: #4c51bf; } */ .placeholder-indigo-800 /* ::placeholder { color: #434190; } */ .placeholder-indigo-900 /* ::placeholder { color: #3c366b; } */ .placeholder-purple-100 /* ::placeholder { color: #faf5ff; } */ .placeholder-purple-200 /* ::placeholder { color: #e9d8fd; } */ .placeholder-purple-300 /* ::placeholder { color: #d6bcfa; } */ .placeholder-purple-400 /* ::placeholder { color: #b794f4; } */ .placeholder-purple-500 /* ::placeholder { color: #9f7aea; } */ .placeholder-purple-600 /* ::placeholder { color: #805ad5; } */ .placeholder-purple-700 /* ::placeholder { color: #6b46c1; } */ .placeholder-purple-800 /* ::placeholder { color: #553c9a; } */ .placeholder-purple-900 /* ::placeholder { color: #44337a; } */ .placeholder-pink-100 /* ::placeholder { color: #fff5f7; } */ .placeholder-pink-200 /* ::placeholder { color: #fed7e2; } */ .placeholder-pink-300 /* ::placeholder { color: #fbb6ce; } */ .placeholder-pink-400 /* ::placeholder { color: #f687b3; } */ .placeholder-pink-500 /* ::placeholder { color: #ed64a6; } */ .placeholder-pink-600 /* ::placeholder { color: #d53f8c; } */ .placeholder-pink-700 /* ::placeholder { color: #b83280; } */ .placeholder-pink-800 /* ::placeholder { color: #97266d; } */ .placeholder-pink-900 /* ::placeholder { color: #702459; } */ /* * Text Align * -------------------- * Utilities for controlling the alignment of text. * By default, only responsive variants are generated for text alignment utilities. */ .text-left /* text-align: left; */ .text-center /* text-align: center; */ .text-right /* text-align: right; */ .text-justify /* text-align: justify; */ /* * Text Color * -------------------- * Utilities for controlling the text color of an element. * By default, only responsive, hover and focus variants are generated for text color utilities. */ .text-transparent /* color: transparent; */ .text-black /* color: #000; */ .text-white /* color: #fff; */ .text-gray-100 /* color: #f7fafc; */ .text-gray-200 /* color: #edf2f7; */ .text-gray-300 /* color: #e2e8f0; */ .text-gray-400 /* color: #cbd5e0; */ .text-gray-500 /* color: #a0aec0; */ .text-gray-600 /* color: #718096; */ .text-gray-700 /* color: #4a5568; */ .text-gray-800 /* color: #2d3748; */ .text-gray-900 /* color: #1a202c; */ .text-red-100 /* color: #fff5f5; */ .text-red-200 /* color: #fed7d7; */ .text-red-300 /* color: #feb2b2; */ .text-red-400 /* color: #fc8181; */ .text-red-500 /* color: #f56565; */ .text-red-600 /* color: #e53e3e; */ .text-red-700 /* color: #c53030; */ .text-red-800 /* color: #9b2c2c; */ .text-red-900 /* color: #742a2a; */ .text-orange-100 /* color: #fffaf0; */ .text-orange-200 /* color: #feebc8; */ .text-orange-300 /* color: #fbd38d; */ .text-orange-400 /* color: #f6ad55; */ .text-orange-500 /* color: #ed8936; */ .text-orange-600 /* color: #dd6b20; */ .text-orange-700 /* color: #c05621; */ .text-orange-800 /* color: #9c4221; */ .text-orange-900 /* color: #7b341e; */ .text-yellow-100 /* color: #fffff0; */ .text-yellow-200 /* color: #fefcbf; */ .text-yellow-300 /* color: #faf089; */ .text-yellow-400 /* color: #f6e05e; */ .text-yellow-500 /* color: #ecc94b; */ .text-yellow-600 /* color: #d69e2e; */ .text-yellow-700 /* color: #b7791f; */ .text-yellow-800 /* color: #975a16; */ .text-yellow-900 /* color: #744210; */ .text-green-100 /* color: #f0fff4; */ .text-green-200 /* color: #c6f6d5; */ .text-green-300 /* color: #9ae6b4; */ .text-green-400 /* color: #68d391; */ .text-green-500 /* color: #48bb78; */ .text-green-600 /* color: #38a169; */ .text-green-700 /* color: #2f855a; */ .text-green-800 /* color: #276749; */ .text-green-900 /* color: #22543d; */ .text-teal-100 /* color: #e6fffa; */ .text-teal-200 /* color: #b2f5ea; */ .text-teal-300 /* color: #81e6d9; */ .text-teal-400 /* color: #4fd1c5; */ .text-teal-500 /* color: #38b2ac; */ .text-teal-600 /* color: #319795; */ .text-teal-700 /* color: #2c7a7b; */ .text-teal-800 /* color: #285e61; */ .text-teal-900 /* color: #234e52; */ .text-blue-100 /* color: #ebf8ff; */ .text-blue-200 /* color: #bee3f8; */ .text-blue-300 /* color: #90cdf4; */ .text-blue-400 /* color: #63b3ed; */ .text-blue-500 /* color: #4299e1; */ .text-blue-600 /* color: #3182ce; */ .text-blue-700 /* color: #2b6cb0; */ .text-blue-800 /* color: #2c5282; */ .text-blue-900 /* color: #2a4365; */ .text-indigo-100 /* color: #ebf4ff; */ .text-indigo-200 /* color: #c3dafe; */ .text-indigo-300 /* color: #a3bffa; */ .text-indigo-400 /* color: #7f9cf5; */ .text-indigo-500 /* color: #667eea; */ .text-indigo-600 /* color: #5a67d8; */ .text-indigo-700 /* color: #4c51bf; */ .text-indigo-800 /* color: #434190; */ .text-indigo-900 /* color: #3c366b; */ .text-purple-100 /* color: #faf5ff; */ .text-purple-200 /* color: #e9d8fd; */ .text-purple-300 /* color: #d6bcfa; */ .text-purple-400 /* color: #b794f4; */ .text-purple-500 /* color: #9f7aea; */ .text-purple-600 /* color: #805ad5; */ .text-purple-700 /* color: #6b46c1; */ .text-purple-800 /* color: #553c9a; */ .text-purple-900 /* color: #44337a; */ .text-pink-100 /* color: #fff5f7; */ .text-pink-200 /* color: #fed7e2; */ .text-pink-300 /* color: #fbb6ce; */ .text-pink-400 /* color: #f687b3; */ .text-pink-500 /* color: #ed64a6; */ .text-pink-600 /* color: #d53f8c; */ .text-pink-700 /* color: #b83280; */ .text-pink-800 /* color: #97266d; */ .text-pink-900 /* color: #702459; */ /* * Text Decoration * -------------------- * Utilities for controlling the decoration of text. * By default, only responsive, hover and focus variants are generated for text decoration utilities. */ .underline /* text-decoration: underline; */ .line-through /* text-decoration: line-through; */ .no-underline /* text-decoration: none; */ /* * Text Transform * -------------------- * Utilities for controlling the transformation of text. * By default, only responsive variants are generated for text transformation utilities. */ .uppercase /* text-transform: uppercase; */ .lowercase /* text-transform: lowercase; */ .capitalize /* text-transform: capitalize; */ .normal-case /* text-transform: none; */ /* * Vertical Align * -------------------- * Utilities for controlling the vertical alignment of an inline or table-cell box. * By default, only responsive variants are generated for vertical alignment utilities. */ .align-baseline /* vertical-align: baseline; */ .align-top /* vertical-align: top; */ .align-middle /* vertical-align: middle; */ .align-bottom /* vertical-align: bottom; */ .align-text-top /* vertical-align: text-top; */ .align-text-bottom /* vertical-align: text-bottom; */ /* * Whitespace * -------------------- * Utilities for controlling an element's white-space property. * By default, only responsive variants are generated for whitespace utilities. */ .whitespace-normal /* white-space: normal; */ .whitespace-no-wrap /* white-space: nowrap; */ .whitespace-pre /* white-space: pre; */ .whitespace-pre-line /* white-space: pre-line; */ .whitespace-pre-wrap /* white-space: pre-wrap; */ /* * Word Break * -------------------- * Utilities for controlling word breaks in an element. * By default, only responsive variants are generated for word break utilities. */ .break-normal /* word-break: normal; overflow-wrap: normal */ .break-words /* overflow-wrap: break-word; */ .break-all /* word-break: break-all; */ .truncate /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap */ /* ******************************************************************************************* * BACKGROUNDS * ******************************************************************************************* */ /* * BACKGROUND ATTACHMENT * -------------------- * Utilities for controlling how a background image behaves when scrolling. * By default, only responsive variants are generated for background attachment utilities. */ .bg-fixed /* background-attachment: fixed; */ .bg-local /* background-attachment: local; */ .bg-scroll /* background-attachment: scroll; */ /* * BACKGROUND COLOR * -------------------- * Utilities for controlling how a background image behaves when scrolling. * By default, only responsive, hover and focus variants are generated for background color utilities. */ .bg-transparent /* background-color: transparent; */ .bg-black /* background-color: #000; */ .bg-white /* background-color: #fff; */ .bg-gray-100 /* background-color: #f7fafc; */ .bg-gray-200 /* background-color: #edf2f7; */ .bg-gray-300 /* background-color: #e2e8f0; */ .bg-gray-400 /* background-color: #cbd5e0; */ .bg-gray-500 /* background-color: #a0aec0; */ .bg-gray-600 /* background-color: #718096; */ .bg-gray-700 /* background-color: #4a5568; */ .bg-gray-800 /* background-color: #2d3748; */ .bg-gray-900 /* background-color: #1a202c; */ .bg-red-100 /* background-color: #fff5f5; */ .bg-red-200 /* background-color: #fed7d7; */ .bg-red-300 /* background-color: #feb2b2; */ .bg-red-400 /* background-color: #fc8181; */ .bg-red-500 /* background-color: #f56565; */ .bg-red-600 /* background-color: #e53e3e; */ .bg-red-700 /* background-color: #c53030; */ .bg-red-800 /* background-color: #9b2c2c; */ .bg-red-900 /* background-color: #742a2a; */ .bg-orange-100 /* background-color: #fffaf0; */ .bg-orange-200 /* background-color: #feebc8; */ .bg-orange-300 /* background-color: #fbd38d; */ .bg-orange-400 /* background-color: #f6ad55; */ .bg-orange-500 /* background-color: #ed8936; */ .bg-orange-600 /* background-color: #dd6b20; */ .bg-orange-700 /* background-color: #c05621; */ .bg-orange-800 /* background-color: #9c4221; */ .bg-orange-900 /* background-color: #7b341e; */ .bg-yellow-100 /* background-color: #fffff0; */ .bg-yellow-200 /* background-color: #fefcbf; */ .bg-yellow-300 /* background-color: #faf089; */ .bg-yellow-400 /* background-color: #f6e05e; */ .bg-yellow-500 /* background-color: #ecc94b; */ .bg-yellow-600 /* background-color: #d69e2e; */ .bg-yellow-700 /* background-color: #b7791f; */ .bg-yellow-800 /* background-color: #975a16; */ .bg-yellow-900 /* background-color: #744210; */ .bg-green-100 /* background-color: #f0fff4; */ .bg-green-200 /* background-color: #c6f6d5; */ .bg-green-300 /* background-color: #9ae6b4; */ .bg-green-400 /* background-color: #68d391; */ .bg-green-500 /* background-color: #48bb78; */ .bg-green-600 /* background-color: #38a169; */ .bg-green-700 /* background-color: #2f855a; */ .bg-green-800 /* background-color: #276749; */ .bg-green-900 /* background-color: #22543d; */ .bg-teal-100 /* background-color: #e6fffa; */ .bg-teal-200 /* background-color: #b2f5ea; */ .bg-teal-300 /* background-color: #81e6d9; */ .bg-teal-400 /* background-color: #4fd1c5; */ .bg-teal-500 /* background-color: #38b2ac; */ .bg-teal-600 /* background-color: #319795; */ .bg-teal-700 /* background-color: #2c7a7b; */ .bg-teal-800 /* background-color: #285e61; */ .bg-teal-900 /* background-color: #234e52; */ .bg-blue-100 /* background-color: #ebf8ff; */ .bg-blue-200 /* background-color: #bee3f8; */ .bg-blue-300 /* background-color: #90cdf4; */ .bg-blue-400 /* background-color: #63b3ed; */ .bg-blue-500 /* background-color: #4299e1; */ .bg-blue-600 /* background-color: #3182ce; */ .bg-blue-700 /* background-color: #2b6cb0; */ .bg-blue-800 /* background-color: #2c5282; */ .bg-blue-900 /* background-color: #2a4365; */ .bg-indigo-100 /* background-color: #ebf4ff; */ .bg-indigo-200 /* background-color: #c3dafe; */ .bg-indigo-300 /* background-color: #a3bffa; */ .bg-indigo-400 /* background-color: #7f9cf5; */ .bg-indigo-500 /* background-color: #667eea; */ .bg-indigo-600 /* background-color: #5a67d8; */ .bg-indigo-700 /* background-color: #4c51bf; */ .bg-indigo-800 /* background-color: #434190; */ .bg-indigo-900 /* background-color: #3c366b; */ .bg-purple-100 /* background-color: #faf5ff; */ .bg-purple-200 /* background-color: #e9d8fd; */ .bg-purple-300 /* background-color: #d6bcfa; */ .bg-purple-400 /* background-color: #b794f4; */ .bg-purple-500 /* background-color: #9f7aea; */ .bg-purple-600 /* background-color: #805ad5; */ .bg-purple-700 /* background-color: #6b46c1; */ .bg-purple-800 /* background-color: #553c9a; */ .bg-purple-900 /* background-color: #44337a; */ .bg-pink-100 /* background-color: #fff5f7; */ .bg-pink-200 /* background-color: #fed7e2; */ .bg-pink-300 /* background-color: #fbb6ce; */ .bg-pink-400 /* background-color: #f687b3; */ .bg-pink-500 /* background-color: #ed64a6; */ .bg-pink-600 /* background-color: #d53f8c; */ .bg-pink-700 /* background-color: #b83280; */ .bg-pink-800 /* background-color: #97266d; */ .bg-pink-900 /* background-color: #702459; */ /* * BACKGROUND POSITION * -------------------- * Utilities for controlling how a background image behaves when scrolling. * By default, only responsive variants are generated for background position utilities. */ .bg-bottom /* background-position: bottom; */ .bg-center /* background-position: center; */ .bg-left /* background-position: left; */ .bg-left-bottom /* background-position: left bottom; */ .bg-left-top /* background-position: left top; */ .bg-right /* background-position: right; */ .bg-right-bottom /* background-position: right bottom; */ .bg-right-top /* background-position: right top; */ .bg-top /* background-position: top; */ /* * BACKGROUND REPEAT * -------------------- * Utilities for controlling the repetition of an element's background image. * By default, only responsive variants are generated for background repeat utilities. */ .bg-repeat /* background-repeat: repeat; */ .bg-no-repeat /* background-repeat: no-repeat; */ .bg-repeat-x /* background-repeat: repeat-x; */ .bg-repeat-y /* background-repeat: repeat-y; */ .bg-repeat-round /* background-repeat: round; */ .bg-repeat-space /* background-repeat: space; */ /* * BACKGROUND SIZE * -------------------- * Utilities for controlling the background size of an element's background image. * By default, only responsive variants are generated for background size utilities. */ .bg-auto /* background-size: auto; */ .bg-cover /* background-size: cover; */ .bg-contain /* background-size: contain; */ /* ******************************************************************************************* * BORDERS * ******************************************************************************************* */ /* * BORDER COLOR * -------------------- * Utilities for controlling the color of an element's borders. * By default, only responsive, hover and focus variants are generated for border color utilities. */ .border-transparent /* border-color: transparent; */ .border-black /* border-color: #000; */ .border-white /* border-color: #fff; */ .border-gray-100 /* border-color: #f7fafc; */ .border-gray-200 /* border-color: #edf2f7; */ .border-gray-300 /* border-color: #e2e8f0; */ .border-gray-400 /* border-color: #cbd5e0; */ .border-gray-500 /* border-color: #a0aec0; */ .border-gray-600 /* border-color: #718096; */ .border-gray-700 /* border-color: #4a5568; */ .border-gray-800 /* border-color: #2d3748; */ .border-gray-900 /* border-color: #1a202c; */ .border-red-100 /* border-color: #fff5f5; */ .border-red-200 /* border-color: #fed7d7; */ .border-red-300 /* border-color: #feb2b2; */ .border-red-400 /* border-color: #fc8181; */ .border-red-500 /* border-color: #f56565; */ .border-red-600 /* border-color: #e53e3e; */ .border-red-700 /* border-color: #c53030; */ .border-red-800 /* border-color: #9b2c2c; */ .border-red-900 /* border-color: #742a2a; */ .border-orange-100 /* border-color: #fffaf0; */ .border-orange-200 /* border-color: #feebc8; */ .border-orange-300 /* border-color: #fbd38d; */ .border-orange-400 /* border-color: #f6ad55; */ .border-orange-500 /* border-color: #ed8936; */ .border-orange-600 /* border-color: #dd6b20; */ .border-orange-700 /* border-color: #c05621; */ .border-orange-800 /* border-color: #9c4221; */ .border-orange-900 /* border-color: #7b341e; */ .border-yellow-100 /* border-color: #fffff0; */ .border-yellow-200 /* border-color: #fefcbf; */ .border-yellow-300 /* border-color: #faf089; */ .border-yellow-400 /* border-color: #f6e05e; */ .border-yellow-500 /* border-color: #ecc94b; */ .border-yellow-600 /* border-color: #d69e2e; */ .border-yellow-700 /* border-color: #b7791f; */ .border-yellow-800 /* border-color: #975a16; */ .border-yellow-900 /* border-color: #744210; */ .border-green-100 /* border-color: #f0fff4; */ .border-green-200 /* border-color: #c6f6d5; */ .border-green-300 /* border-color: #9ae6b4; */ .border-green-400 /* border-color: #68d391; */ .border-green-500 /* border-color: #48bb78; */ .border-green-600 /* border-color: #38a169; */ .border-green-700 /* border-color: #2f855a; */ .border-green-800 /* border-color: #276749; */ .border-green-900 /* border-color: #22543d; */ .border-teal-100 /* border-color: #e6fffa; */ .border-teal-200 /* border-color: #b2f5ea; */ .border-teal-300 /* border-color: #81e6d9; */ .border-teal-400 /* border-color: #4fd1c5; */ .border-teal-500 /* border-color: #38b2ac; */ .border-teal-600 /* border-color: #319795; */ .border-teal-700 /* border-color: #2c7a7b; */ .border-teal-800 /* border-color: #285e61; */ .border-teal-900 /* border-color: #234e52; */ .border-blue-100 /* border-color: #ebf8ff; */ .border-blue-200 /* border-color: #bee3f8; */ .border-blue-300 /* border-color: #90cdf4; */ .border-blue-400 /* border-color: #63b3ed; */ .border-blue-500 /* border-color: #4299e1; */ .border-blue-600 /* border-color: #3182ce; */ .border-blue-700 /* border-color: #2b6cb0; */ .border-blue-800 /* border-color: #2c5282; */ .border-blue-900 /* border-color: #2a4365; */ .border-indigo-100 /* border-color: #ebf4ff; */ .border-indigo-200 /* border-color: #c3dafe; */ .border-indigo-300 /* border-color: #a3bffa; */ .border-indigo-400 /* border-color: #7f9cf5; */ .border-indigo-500 /* border-color: #667eea; */ .border-indigo-600 /* border-color: #5a67d8; */ .border-indigo-700 /* border-color: #4c51bf; */ .border-indigo-800 /* border-color: #434190; */ .border-indigo-900 /* border-color: #3c366b; */ .border-purple-100 /* border-color: #faf5ff; */ .border-purple-200 /* border-color: #e9d8fd; */ .border-purple-300 /* border-color: #d6bcfa; */ .border-purple-400 /* border-color: #b794f4; */ .border-purple-500 /* border-color: #9f7aea; */ .border-purple-600 /* border-color: #805ad5; */ .border-purple-700 /* border-color: #6b46c1; */ .border-purple-800 /* border-color: #553c9a; */ .border-purple-900 /* border-color: #44337a; */ .border-pink-100 /* border-color: #fff5f7; */ .border-pink-200 /* border-color: #fed7e2; */ .border-pink-300 /* border-color: #fbb6ce; */ .border-pink-400 /* border-color: #f687b3; */ .border-pink-500 /* border-color: #ed64a6; */ .border-pink-600 /* border-color: #d53f8c; */ .border-pink-700 /* border-color: #b83280; */ .border-pink-800 /* border-color: #97266d; */ .border-pink-900 /* border-color: #702459; */ /* * BORDER STYLE * -------------------- * Utilities for controlling the style of an element's borders. * By default, only responsive variants are generated for border style utilities. */ .border-solid /* border-style: solid; */ .border-dashed /* border-style: dashed; */ .border-dotted /* border-style: dotted; */ .border-double /* border-style: double; */ .border-none /* border-style: none; */ /* * BORDER WIDTH * -------------------- * Utilities for controlling the width of an element's borders. * By default, only responsive variants are generated for border width utilities. */ .border /* border-width: 1px; */ .border-0 /* border-width: 0; */ .border-2 /* border-width: 2px; */ .border-4 /* border-width: 4px; */ .border-8 /* border-width: 8px; */ .border-t /* border-top-width: 1px; */ .border-r /* border-right-width: 1px; */ .border-b /* border-bottom-width: 1px; */ .border-l /* border-left-width: 1px; */ .border-t-0 /* border-top-width: 0; */ .border-r-0 /* border-right-width: 0; */ .border-b-0 /* border-bottom-width: 0; */ .border-l-0 /* border-left-width: 0; */ .border-t-2 /* border-top-width: 2px; */ .border-r-2 /* border-right-width: 2px; */ .border-b-2 /* border-bottom-width: 2px; */ .border-l-2 /* border-left-width: 2px; */ .border-t-4 /* border-top-width: 4px; */ .border-r-4 /* border-right-width: 4px; */ .border-b-4 /* border-bottom-width: 4px; */ .border-l-4 /* border-left-width: 4px; */ .border-t-8 /* border-top-width: 8px; */ .border-r-8 /* border-right-width: 8px; */ .border-b-8 /* border-bottom-width: 8px; */ .border-l-8 /* border-left-width: 8px; */ /* * BORDER RADIUS * -------------------- * Utilities for controlling the border radius of an element. * By default, only responsive variants are generated for border radius utilities. */ .rounded-none /* border-radius: 0; */ .rounded-sm /* border-radius: 0.125rem; */ .rounded /* border-radius: 0.25rem; */ .rounded-md /* border-radius: 0.375rem; */ .rounded-lg /* border-radius: 0.5rem; */ .rounded-full /* border-radius: 9999px; */ .rounded-t-none /* border-top-left-radius: 0; border-top-right-radius: 0; */ .rounded-r-none /* border-top-right-radius: 0; border-bottom-right-radius: 0; */ .rounded-b-none /* border-bottom-right-radius: 0; border-bottom-left-radius: 0; */ .rounded-l-none /* border-top-left-radius: 0; border-bottom-left-radius: 0; */ .rounded-t-sm /* border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; */ .rounded-r-sm /* border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem; */ .rounded-b-sm /* border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem; */ .rounded-l-sm /* border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem; */ .rounded-t /* border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; */ .rounded-r /* border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; */ .rounded-b /* border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; */ .rounded-l /* border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; */ .rounded-t-md /* border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; */ .rounded-r-md /* border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; */ .rounded-b-md /* border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; */ .rounded-l-md /* border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; */ .rounded-t-lg /* border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; */ .rounded-r-lg /* border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; */ .rounded-b-lg /* border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; */ .rounded-l-lg /* border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; */ .rounded-t-full /* border-top-left-radius: 9999px; border-top-right-radius: 9999px; */ .rounded-r-full /* border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; */ .rounded-b-full /* border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; */ .rounded-l-full /* border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; */ .rounded-tl-none /* border-top-left-radius: 0; */ .rounded-tr-none /* border-top-right-radius: 0; */ .rounded-br-none /* border-bottom-right-radius: 0; */ .rounded-bl-none /* border-bottom-left-radius: 0; */ .rounded-tl-sm /* border-top-left-radius: 0.125rem; */ .rounded-tr-sm /* border-top-right-radius: 0.125rem; */ .rounded-br-sm /* border-bottom-right-radius: 0.125rem; */ .rounded-bl-sm /* border-bottom-left-radius: 0.125rem; */ .rounded-tl /* border-top-left-radius: 0.25rem; */ .rounded-tr /* border-top-right-radius: 0.25rem; */ .rounded-br /* border-bottom-right-radius: 0.25rem; */ .rounded-bl /* border-bottom-left-radius: 0.25rem; */ .rounded-tl-md /* border-top-left-radius: 0.375rem; */ .rounded-tr-md /* border-top-right-radius: 0.375rem; */ .rounded-br-md /* border-bottom-right-radius: 0.375rem; */ .rounded-bl-md /* border-bottom-left-radius: 0.375rem; */ .rounded-tl-lg /* border-top-left-radius: 0.5rem; */ .rounded-tr-lg /* border-top-right-radius: 0.5rem; */ .rounded-br-lg /* border-bottom-right-radius: 0.5rem; */ .rounded-bl-lg /* border-bottom-left-radius: 0.5rem; */ .rounded-tl-full /* border-top-left-radius: 9999px; */ .rounded-tr-full /* border-top-right-radius: 9999px; */ .rounded-br-full /* border-bottom-right-radius: 9999px; */ .rounded-bl-full /* border-bottom-left-radius: 9999px; */ /* ******************************************************************************************* * TABLES * ******************************************************************************************* */ /* * TABLE LAYOUT * -------------------- * Utilities for controlling the table layout algorithm. * By default, only responsive variants are generated for table layout utilities. */ .table-auto /* table-layout: auto; */ .table-fixed /* table-layout: fixed; */ /* * BORDER COLLAPSE * -------------------- * Utilities for controlling whether table borders should collapse or be separated. * By default, only responsive variants are generated for border collapse utilities. */ .border-collapse /* border-collapse: collapse; */ .border-separate /* border-collapse: separate; */ /* ******************************************************************************************* * EFFECTS * ******************************************************************************************* */ /* * BOX SHADOW * -------------------- * Utilities for controlling the box shadow of an element. * By default, only responsive, hover and focus variants are generated for box shadow utilities. */ .shadow-xs /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); */ .shadow-sm /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); */ .shadow /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */ .shadow-md /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */ .shadow-lg /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */ .shadow-xl /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */ .shadow-2xl /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */ .shadow-inner /* box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); */ .shadow-outline /* box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); */ .shadow-none /* box-shadow: none; */ /* * OPACITY * -------------------- * Utilities for controlling the opacity of an element. * By default, only responsive, hover and focus variants are generated for opacity utilities. */ .opacity-100 /* opacity: 1; */ .opacity-75 /* opacity: .75; */ .opacity-50 /* opacity: .5; */ .opacity-25 /* opacity: .25; */ .opacity-0 /* opacity: 0; */ /* ******************************************************************************************* * TRANSITIONS * ******************************************************************************************* */ /* * TRANSITION PROPERTY * -------------------- * Utilities for controlling which CSS properties transition. * By default, only responsive variants are generated for transition-property utilities. */ .transition-none /* transition-property: none; */ .transition-all /* transition-property: all; */ .transition /* transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; */ .transition-colors /* transition-property: background-color, border-color, color, fill, stroke; */ .transition-opacity /* transition-property: opacity; */ .transition-shadow /* transition-property: box-shadow; */ .transition-transform /* transition-property: transform; */ /* * TRANSITION DURATION * -------------------- * Utilities for controlling the duration of CSS transitions. * By default, only responsive variants are generated for transition-duration utilities. */ .duration-75 /* transition-duration: 75ms; */ .duration-100 /* transition-duration: 100ms; */ .duration-150 /* transition-duration: 150ms; */ .duration-200 /* transition-duration: 200ms; */ .duration-300 /* transition-duration: 300ms; */ .duration-500 /* transition-duration: 500ms; */ .duration-700 /* transition-duration: 700ms; */ .duration-1000 /* transition-duration: 1000ms; */ /* * TRANSITION TIMING FUNCTION * -------------------- * Utilities for controlling the easing of CSS transitions. * By default, only responsive variants are generated for transition-timing-function utilities. */ .ease-linear /* transition-timing-function: linear; */ .ease-in /* transition-timing-function: cubic-bezier(0.4, 0, 1, 1); */ .ease-out /* transition-timing-function: cubic-bezier(0, 0, 0.2, 1); */ .ease-in-out /* transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); */ /* ******************************************************************************************* * TRANSFORMS * ******************************************************************************************* */ /* * SCALE * -------------------- * Utilities for scaling elements with transform. * By default, only responsive, hover and focus variants are generated for scale utilities. */ .scale-0 /* --transform-scale-x: 0; --transform-scale-y: 0; */ .scale-50 /* --transform-scale-x: .5; --transform-scale-y: .5; */ .scale-75 /* --transform-scale-x: .75; --transform-scale-y: .75; */ .scale-90 /* --transform-scale-x: .9; --transform-scale-y: .9; */ .scale-95 /* --transform-scale-x: .95; --transform-scale-y: .95; */ .scale-100 /* --transform-scale-x: 1; --transform-scale-y: 1; */ .scale-105 /* --transform-scale-x: 1.05; --transform-scale-y: 1.05; */ .scale-110 /* --transform-scale-x: 1.1; --transform-scale-y: 1.1; */ .scale-125 /* --transform-scale-x: 1.25; --transform-scale-y: 1.25; */ .scale-150 /* --transform-scale-x: 1.5; --transform-scale-y: 1.5; */ .scale-x-0 /* --transform-scale-x: 0; */ .scale-x-50 /* --transform-scale-x: .5; */ .scale-x-75 /* --transform-scale-x: .75; */ .scale-x-90 /* --transform-scale-x: .9; */ .scale-x-95 /* --transform-scale-x: .95; */ .scale-x-100 /* --transform-scale-x: 1; */ .scale-x-105 /* --transform-scale-x: 1.05; */ .scale-x-110 /* --transform-scale-x: 1.1; */ .scale-x-125 /* --transform-scale-x: 1.25; */ .scale-x-150 /* --transform-scale-x: 1.5; */ .scale-y-0 /* --transform-scale-y: 0; */ .scale-y-50 /* --transform-scale-y: .5; */ .scale-y-75 /* --transform-scale-y: .75; */ .scale-y-90 /* --transform-scale-y: .9; */ .scale-y-95 /* --transform-scale-y: .95; */ .scale-y-100 /* --transform-scale-y: 1; */ .scale-y-105 /* --transform-scale-y: 1.05; */ .scale-y-110 /* --transform-scale-y: 1.1; */ .scale-y-125 /* --transform-scale-y: 1.25; */ .scale-y-150 /* --transform-scale-y: 1.5; */ /* * ROTATE * -------------------- * Utilities for rotating elements with transform. * By default, only responsive, hover and focus variants are generated for rotate utilities. */ .rotate-0 /* --transform-rotate: 0; */ .rotate-45 /* --transform-rotate: 45deg; */ .rotate-90 /* --transform-rotate: 90deg; */ .rotate-180 /* --transform-rotate: 180deg; */ .-rotate-180 /* --transform-rotate: -180deg; */ .-rotate-90 /* --transform-rotate: -90deg; */ .-rotate-45 /* --transform-rotate: -45deg; */ /* * TRANSLATE * -------------------- * Utilities for translating elements with transform. * By default, only responsive, hover and focus variants are generated for translate utilities. */ .translate-x-0 /* --transform-translate-x: 0; */ .translate-x-1 /* --transform-translate-x: 0.25rem; */ .translate-x-2 /* --transform-translate-x: 0.5rem; */ .translate-x-3 /* --transform-translate-x: 0.75rem; */ .translate-x-4 /* --transform-translate-x: 1rem; */ .translate-x-5 /* --transform-translate-x: 1.25rem; */ .translate-x-6 /* --transform-translate-x: 1.5rem; */ .translate-x-8 /* --transform-translate-x: 2rem; */ .translate-x-10 /* --transform-translate-x: 2.5rem; */ .translate-x-12 /* --transform-translate-x: 3rem; */ .translate-x-16 /* --transform-translate-x: 4rem; */ .translate-x-20 /* --transform-translate-x: 5rem; */ .translate-x-24 /* --transform-translate-x: 6rem; */ .translate-x-32 /* --transform-translate-x: 8rem; */ .translate-x-40 /* --transform-translate-x: 10rem; */ .translate-x-48 /* --transform-translate-x: 12rem; */ .translate-x-56 /* --transform-translate-x: 14rem; */ .translate-x-64 /* --transform-translate-x: 16rem; */ .translate-x-px /* --transform-translate-x: 1px; */ .-translate-x-1 /* --transform-translate-x: -0.25rem; */ .-translate-x-2 /* --transform-translate-x: -0.5rem; */ .-translate-x-3 /* --transform-translate-x: -0.75rem; */ .-translate-x-4 /* --transform-translate-x: -1rem; */ .-translate-x-5 /* --transform-translate-x: -1.25rem; */ .-translate-x-6 /* --transform-translate-x: -1.5rem; */ .-translate-x-8 /* --transform-translate-x: -2rem; */ .-translate-x-10 /* --transform-translate-x: -2.5rem; */ .-translate-x-12 /* --transform-translate-x: -3rem; */ .-translate-x-16 /* --transform-translate-x: -4rem; */ .-translate-x-20 /* --transform-translate-x: -5rem; */ .-translate-x-24 /* --transform-translate-x: -6rem; */ .-translate-x-32 /* --transform-translate-x: -8rem; */ .-translate-x-40 /* --transform-translate-x: -10rem; */ .-translate-x-48 /* --transform-translate-x: -12rem; */ .-translate-x-56 /* --transform-translate-x: -14rem; */ .-translate-x-64 /* --transform-translate-x: -16rem; */ .-translate-x-px /* --transform-translate-x: -1px; */ .-translate-x-full /* --transform-translate-x: -100%; */ .-translate-x-1/2 /* --transform-translate-x: -50%; */ .translate-x-1/2 /* --transform-translate-x: 50%; */ .translate-x-full /* --transform-translate-x: 100%; */ .translate-y-0 /* --transform-translate-y: 0; */ .translate-y-1 /* --transform-translate-y: 0.25rem; */ .translate-y-2 /* --transform-translate-y: 0.5rem; */ .translate-y-3 /* --transform-translate-y: 0.75rem; */ .translate-y-4 /* --transform-translate-y: 1rem; */ .translate-y-5 /* --transform-translate-y: 1.25rem; */ .translate-y-6 /* --transform-translate-y: 1.5rem; */ .translate-y-8 /* --transform-translate-y: 2rem; */ .translate-y-10 /* --transform-translate-y: 2.5rem; */ .translate-y-12 /* --transform-translate-y: 3rem; */ .translate-y-16 /* --transform-translate-y: 4rem; */ .translate-y-20 /* --transform-translate-y: 5rem; */ .translate-y-24 /* --transform-translate-y: 6rem; */ .translate-y-32 /* --transform-translate-y: 8rem; */ .translate-y-40 /* --transform-translate-y: 10rem; */ .translate-y-48 /* --transform-translate-y: 12rem; */ .translate-y-56 /* --transform-translate-y: 14rem; */ .translate-y-64 /* --transform-translate-y: 16rem; */ .translate-y-px /* --transform-translate-y: 1px; */ .-translate-y-1 /* --transform-translate-y: -0.25rem; */ .-translate-y-2 /* --transform-translate-y: -0.5rem; */ .-translate-y-3 /* --transform-translate-y: -0.75rem; */ .-translate-y-4 /* --transform-translate-y: -1rem; */ .-translate-y-5 /* --transform-translate-y: -1.25rem; */ .-translate-y-6 /* --transform-translate-y: -1.5rem; */ .-translate-y-8 /* --transform-translate-y: -2rem; */ .-translate-y-10 /* --transform-translate-y: -2.5rem; */ .-translate-y-12 /* --transform-translate-y: -3rem; */ .-translate-y-16 /* --transform-translate-y: -4rem; */ .-translate-y-20 /* --transform-translate-y: -5rem; */ .-translate-y-24 /* --transform-translate-y: -6rem; */ .-translate-y-32 /* --transform-translate-y: -8rem; */ .-translate-y-40 /* --transform-translate-y: -10rem; */ .-translate-y-48 /* --transform-translate-y: -12rem; */ .-translate-y-56 /* --transform-translate-y: -14rem; */ .-translate-y-64 /* --transform-translate-y: -16rem; */ .-translate-y-px /* --transform-translate-y: -1px; */ .-translate-y-full /* --transform-translate-y: -100%; */ .-translate-y-1/2 /* --transform-translate-y: -50%; */ .translate-y-1/2 /* --transform-translate-y: 50%; */ .translate-y-full /* --transform-translate-y: 100%; */ /* * SKEW * -------------------- * Utilities for translating elements with transform. * By default, only responsive, hover and focus variants are generated for skew utilities. */ .skew-x-0 /* --transform-skew-x: 0; */ .skew-x-3 /* --transform-skew-x: 3deg; */ .skew-x-6 /* --transform-skew-x: 6deg; */ .skew-x-12 /* --transform-skew-x: 12deg; */ .-skew-x-12 /* --transform-skew-x: -12deg; */ .-skew-x-6 /* --transform-skew-x: -6deg; */ .-skew-x-3 /* --transform-skew-x: -3deg; */ .skew-y-0 /* --transform-skew-y: 0; */ .skew-y-3 /* --transform-skew-y: 3deg; */ .skew-y-6 /* --transform-skew-y: 6deg; */ .skew-y-12 /* --transform-skew-y: 12deg; */ .-skew-y-12 /* --transform-skew-y: -12deg; */ .-skew-y-6 /* --transform-skew-y: -6deg; */ .-skew-y-3 /* --transform-skew-y: -3deg; */ /* * TRANSFORM ORIGIN * -------------------- * Utilities for specifying the origin for an element's transformations. * By default, only responsive variants are generated for transform-origin utilities. */ .origin-center /* transform-origin: center; */ .origin-top /* transform-origin: top; */ .origin-top-right /* transform-origin: top right; */ .origin-right /* transform-origin: right; */ .origin-bottom-right /* transform-origin: bottom right; */ .origin-bottom /* transform-origin: bottom; */ .origin-bottom-left /* transform-origin: bottom left; */ .origin-left /* transform-origin: left; */ .origin-top-left /* transform-origin: top left; */ /* ******************************************************************************************* * INTERACTIVITY * ******************************************************************************************* */ /* * APPEARANCE * -------------------- * Utilities for suppressing native form control styling. * By default, only responsive variants are generated for appearance utilities. */ .appearance-none /* appearance: none; */ /* * CURSOR * -------------------- * Utilities for controlling the cursor style when hovering over an element. * By default, only responsive variants are generated for cursor utilities. */ .cursor-auto /* cursor: auto; */ .cursor-default /* cursor: default; */ .cursor-pointer /* cursor: pointer; */ .cursor-wait /* cursor: wait; */ .cursor-text /* cursor: text; */ .cursor-move /* cursor: move; */ .cursor-not-allowed /* cursor: not-allowed; */ /* * OUTLINE * -------------------- * Utilities for controlling an element's outline. * By default, only focus variants are generated for outline utilities. */ .outline-none /* outline: 0; */ /* * POINTER EVENTS * -------------------- * Utilities for controlling whether an element responds to pointer events. * By default, only responsive variants are generated for pointer event utilities. */ .pointer-events-none /* pointer-events: none; */ .pointer-events-auto /* pointer-events: auto; */ /* * RESIZE * -------------------- * Utilities for controlling how an element can be resized. * By default, only responsive variants are generated for resizing utilities. */ .resize-none /* resize: none; */ .resize /* resize: both; */ .resize-y /* resize: vertical; */ .resize-x /* resize: horizontal; */ /* * USER SELECT * -------------------- * Utilities for controlling whether the user can select text in an element. * By default, only responsive variants are generated for user-select utilities. */ .select-none /* user-select: none; */ .select-text /* user-select: text; */ .select-all /* user-select: all; */ .select-auto /* user-select: auto; */ /* ******************************************************************************************* * SVG * ******************************************************************************************* */ /* * FILL * -------------------- * Utilities for styling the fill of SVG elements. * By default, only responsive variants are generated for fill utilities. */ .fill-current /* fill: currentColor; */ /* * STROKE * -------------------- * Utilities for styling the stroke of SVG elements. * By default, only responsive variants are generated for stroke utilities. */ .stroke-current /* stroke: currentColor; */ /* * STROKE WIDTH * -------------------- * Utilities for styling the stroke width of SVG elements. * By default, only responsive variants are generated for stroke-width utilities. */ .stroke-0 /* stroke-width: 0; */ .stroke-1 /* stroke-width: 1; */ .stroke-2 /* stroke-width: 2; */ /* ******************************************************************************************* * ACCESSIBILITY * ******************************************************************************************* */ /* * SCREEN READERS * -------------------- * Utilities for improving accessibility with screen readers. * By default, only responsive, hover, focus and active variants are generated for accessibility utilities. */ .sr-only /* position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; */ .not-sr-only /* position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; */
Resources & Component Libraries
- Tailwind CSS Tailwind CSS Official Website
- Tailwind CSS Documentation Tailwind CSS Documentation
- Tailwind CSS GitHub Tailwind CSS GitHub
- Tailwind Components Tailwind UI Components
- Awesome Tailwind CSS 😎 Awesome things related to Tailwind CSS
- What is Tailwind CSS? A Beginner's Guide
- TailwindPLAY TailwindCSS Playground
- Tailwind Flex 1700+ Ready to Use Components
- HyperUI A collection of Tailwind CSS components
- FlyonUI Save countless hours by using FlyonUI’s ready-made components, blocks, and templates, designed to simplify your workflow and bring your projects to life with ease.
- TW Elements Powerful components for Tailwind CSS. Consistent design & advanced functionalities.
- Preline Preline UI is an open-source Tailwind CSS components library for any needs. Comes with UI examples & blocks, templates, plugins, Figma design system and more.
- Prettier A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.