/* ******************************************************************************************* * 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 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 * ---------- * * */ /* * Align Content * ---------- * * */ /* * Align Self * ---------- * * */ /* * Justify Content * ---------- * * */ /* * Flex * ---------- * * */ /* * Flex Grow * ---------- * * */ /* * Flex Shrink * ---------- * * */ /* * Order * ---------- * * */ /* ******************************************************************************************* * GRID * ******************************************************************************************* */ /* * Grid Template Columns * ---------- * * */ /* * Grid Column Start / End * ---------- * * */ /* * Grid Template Rows * ---------- * * */ /* * Grid Row Start / End * ---------- * * */ /* * Gap * ---------- * * */ /* * Grid Auto Flow * ---------- * * */ /* ******************************************************************************************* * SPACING * ******************************************************************************************* */ /* * Padding * ---------- * * */ /* * Margin * ---------- * * */ /* ******************************************************************************************* * SIZING * ******************************************************************************************* */ /* * Width * ---------- * * */ /* * Min-Width * ---------- * * */ /* * Max-Width * ---------- * * */ /* * Height * ---------- * * */ /* * Min-Height * ---------- * * */ /* * Max-Height * ---------- * * */ /* ******************************************************************************************* * TYPOGRAPHY * ******************************************************************************************* */ /* * Font Family * ---------- * * */ /* * Font Size * ---------- * * */ /* * Font Smoothing * ---------- * * */ /* * Font Style * ---------- * * */ /* * Font Weight * ---------- * * */ /* * Letter Spacing * ---------- * * */ /* * Line Height * ---------- * * */ /* * List Style Type * ---------- * * */ /* * List Style Position * ---------- * * */ /* * Placeholder Color * ---------- * * */ /* * Text Align * ---------- * * */ /* * Text Color * ---------- * * */ /* * Text Decoration * ---------- * * */ /* * Text Transform * ---------- * * */ /* * Vertical Align * ---------- * * */ /* * Whitespace * ---------- * * */ /* * Word Break * ---------- * * */ /* ******************************************************************************************* * BACKGROUNDS * ******************************************************************************************* */ /* * BACKGROUND ATTACHMENT * ---------- * * */ /* * BACKGROUND COLOR * ---------- * * */ /* * BACKGROUND POSITION * ---------- * * */ /* * BACKGROUND REPEAT * ---------- * * */ /* * BACKGROUND SIZE * ---------- * * */ /* ******************************************************************************************* * BORDERS * ******************************************************************************************* */ /* * BORDER COLOR * ---------- * * */ /* * BORDER STYLE * ---------- * * */ /* * BORDER WIDTH * ---------- * * */ /* * BORDER RADIUS * ---------- * * */ /* ******************************************************************************************* * TABLES * ******************************************************************************************* */ /* * BORDER COLLAPSE * ---------- * * */ /* * TABLE LAYOUT * ---------- * * */ /* ******************************************************************************************* * EFFECTS * ******************************************************************************************* */ /* * BOX SHADOW * ---------- * * */ /* * OPACITY * ---------- * * */ /* ******************************************************************************************* * TRANSITIONS * ******************************************************************************************* */ /* * TRANSITION PROPERTY * ---------- * * */ /* * TRANSITION DURATION * ---------- * * */ /* * TRANSITION TIMING FUNCTION * ---------- * * */ /* ******************************************************************************************* * TRANSFORMS * ******************************************************************************************* */ /* * SCALE * ---------- * * */ /* * ROTATE * ---------- * * */ /* * TRANSLATE * ---------- * * */ /* * SKEW * ---------- * * */ /* * TRANSFORM ORIGIN * ---------- * * */ /* ******************************************************************************************* * INTERACTIVITY * ******************************************************************************************* */ /* * APPEARANCE * ---------- * * */ /* * CURSOR * ---------- * * */ /* * OUTLINE * ---------- * * */ /* * POINTER EVENTS * ---------- * * */ /* * RESIZE * ---------- * * */ /* * USER SELECT * ---------- * * */ /* ******************************************************************************************* * SVG * ******************************************************************************************* */ /* * FILL * ---------- * * */ /* * STROKE * ---------- * * */ /* * STROKE WIDTH * ---------- * * */ /* ******************************************************************************************* * ACCESSIBILITY * ******************************************************************************************* */ /* * SCREEN READERS * ---------- * * */