| Initialization folder | npm init -y |
|---|---|
| Install Tailwind CSS |
npm install -D tailwindcss
npx tailwindcss init
|
| Configure your template paths |
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Exa.
content: [
'./public/index.html',
'./src/**/*.{html,js}',
'./components/**/*.{html,js}',
'./pages/**/*.{html,js}',
'./index.html',
],
* Never include CSS files in your content configuration
|
| Add the Tailwind directives to your CSS |
input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
|
| Start the Tailwind CLI build process |
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Run Command: npm run build
|
| Start using Tailwind in your HTML |
index.html/php
<link href="/output.css" rel="stylesheet">
|
The screen function allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.
input.css
@media screen(sm) {
/* ... */
}
@media (min-width: 640px) {
/* ... */
}
|
| Breakpoint prefix | Minimum width | CSS |
|---|---|---|
sm |
640px | @media (min-width: 640px) { ... } |
md |
768px | @media (min-width: 768px) { ... } |
lg |
1024px | @media (min-width: 1024px) { ... } |
xl |
1280px | @media (min-width: 1280px) { ... } |
2xl |
1536px | @media (min-width: 1536px) { ... } |
<img class="w-16 md:w-32 lg:w-48" src="...">
| Hover |
<button class="bg-sky-500 hover:bg-sky-700 ...">
|
|---|---|
| Focus |
<button class="bg-sky-500 focus:bg-sky-700 ...">
|
| Active |
<button class="bg-sky-500 active:bg-sky-700 ...">
|
| Disabled |
<button class="bg-sky-500 disabled:bg-sky-700 ...">
|
Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.
|
Gray,
Zinc,
Neutral,
Stone,
Red,
Orange,
Amber,
Yellow,
Lime,
Green,
Emerald,
Teal,
Cyan,
Sky,
Blue,
Indigo,
Violet,
Purple,
Fuchsia,
Pink,
Rose
|
|---|
|
50
100
200
300
400
500
600
700
800
900
950
|
class="text-rose-600" Class="bg-slate-950"
| Class | Properties | |
|---|---|---|
| Container | container | width: 100%; |
| sm (640px) | max-width: 640px; | |
| md (768px) | max-width: 768px; | |
| lg (1024px) | max-width: 1024px; | |
| xl (1280px) | max-width: 1280px; | |
| 2xl (1536px) | max-width: 1536px; | |
| Columns | columns-1 | columns: 1; |
| columns-2 | columns: 2; | |
| columns-3 | columns: 3; | |
| columns-4 | columns: 4; | |
| columns-5 | columns: 5; | |
| columns-6 | columns: 6; | |
| columns-7 | columns: 7; | |
| columns-8 | columns: 8; | |
| columns-9 | columns: 9; | |
| columns-10 | columns: 10; | |
| columns-11 | columns: 11; | |
| columns-12 | columns: 12; | |
| columns-auto | columns: auto; | |
| columns-3xs | columns: 16rem; /* 256px */ | |
| columns-2xs | columns: 18rem; /* 288px */ | |
| columns-xs | columns: 20rem; /* 320px */ | |
| columns-sm | columns: 24rem; /* 384px */ | |
| columns-md | columns: 28rem; /* 448px */ | |
| columns-12 | columns: 12; | |
| columns-lg | columns: 32rem; /* 512px */ | |
| columns-xl | columns: 36rem; /* 576px */ | |
| columns-2xl | columns: 42rem; /* 672px */ | |
| columns-3xl | columns: 48rem; /* 768px */ | |
| columns-4xl | columns: 56rem; /* 896px */ | |
| columns-5xl | columns: 64rem; /* 1024px */ | |
| columns-6xl | columns: 72rem; /* 1152px */ | |
| columns-7xl | columns: 80rem; /* 1280px */ | |
| Display | block | display: block; |
| inline-block | display: inline-block; | |
| inline | display: inline; | |
| flex | display: flex; | |
| grid | display: grid; | |
| list-item | display: list-item; | |
| hidden | display: none; | |
| Floats | float-left | float: left; |
| float-right | float: right; | |
| float-none | float: none; | |
| Clear | clear-left | clear: left; |
| clear-right | clear: right; | |
| clear-both | clear: both; | |
| Object Fit | 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; | |
| Overflow | 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; | |
| Position | static | position: static; |
| fixed | position: fixed; | |
| absolute | position: absolute; | |
| relative | position: relative; | |
| sticky | position: sticky; | |
| Top / Right / Bottom / Left | inset-0 | inset: 0px; |
| inset-x-0 | left: 0px; right: 0px; | |
| inset-y-0 | top: 0px; bottom: 0px; | |
| start-0 | inset-inline-start: 0px; | |
| end-0 | inset-inline-end: 0px; | |
| top-0 | top: 0px; | |
| right-0 | right: 0px; | |
| bottom-0 | bottom: 0px; | |
| left-0 | left: 0px; | |
| Visibility | visible | visibility: visible; |
| invisible | visibility: hidden; | |
| collapse | visibility: collapse; | |
| Z-Index | z-0, z-10, z-20, z-30, z-40, z-50, z-auto | |
| Customizing |
tailwind.config.js
module.exports = {
theme: {
extend: {
zIndex: {
'999': '999',
}
}
}
}
OR
class="z-[100]"
|
|
| Padding | p-0 | padding: 0px; |
| px-0 | padding-left: 0px; padding-right: 0px; | |
| py-0 | padding-top: 0px; padding-bottom: 0px; | |
| pt-0 | padding-top: 0px; | |
| pb-0 | padding-bottom: 0px; | |
| pr-0 | padding-right: 0px; | |
| pl-0 | padding-left: 0px; | |
| 0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem) | ||
| Customize |
tailwind.config.js
module.exports = {
theme: {
extend: {
padding: {
'5px': '5px',
}
}
}
}
OR
class="p-[5px]"
|
|
| Margin | m-0 | margin: 0px; |
| mx-auto | margin-left: auto; margin-right: auto; | |
| my-auto | margin-top: auto; margin-bottom: auto; | |
| mx-0 | margin-left: 0px; margin-right: 0px; | |
| my-0 | margin-top: 0px; margin-bottom: 0px; | |
| mt-0 | margin-top: 0px; | |
| mb-0 | margin-bottom: 0px; | |
| mr-0 | margin-right: 0px; | |
| ml-0 | margin-left: 0px; | |
| Space Between | space-x-0, space-y-0 |
margin-left: 0px; margin-top: 0px; Utilities for controlling the space between child elements. |
| space-y-reverse space-x-reverse |
--tw-space-y-reverse: 1; --tw-space-x-reverse: 1; If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element. Using negative valuesTo use a negative space value, prefix the class name with a dash to convert it to a negative value. |
|
| Dimentions | w-0 | width: 0px; |
| w-auto | width: auto; | |
| w-1/12 | width: 8.333333%; | |
| w-1/6, w-2/12 | width: 16.666667%; | |
| w-1/5 | width: 20%; | |
| w-1/4, w-3/12 | width: 25%; | |
| w-1/3, w-4/12 | width: 33.333333%; | |
| w-2/5 | width: 40%; | |
| w-5/12 | width: 41.666667%; | |
| w-1/2, w-2/4, w-3/6, w-6/12 | width: 50%; | |
| w-7/12 | width: 58.333333%; | |
| w-3/5 | width: 60%; | |
| w-2/3, w-4/6, w-8/12 | width: 66.666667%; | |
| w-3/4, w-9/12 | width: 75%; | |
| w-4/5 | width: 80%; | |
| w-5/6, w-10/12 | width: 83.333333%; | |
| w-11/12 | width: 91.666667%; | |
| w-full | width: 100%; | |
| w-screen | width: 100vw; | |
| 0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem) | ||
| Width and height having same type of properties with prefix of (w/h) | ||
| min-width, max-width |
min-height, max-height |
|
| Size | size-0 | width: 0px; height: 0px; |
| size-auto | width: auto; height: auto; | |
| Same Properties like other 0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem) |
||
| Typography | font-sans | font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; |
| font-serif | font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; | |
| font-mono | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| Customize |
tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['ui-sans-serif', 'system-ui', ...],
'serif': ['ui-serif', 'Georgia', ...],
}
}
}
input.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Poppins', sans-serif;
}
}
|
|
| Font Size | text-xs | font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ |
| text-sm | font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ | |
| text-sm | font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ | |
| text-base | font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */ | |
| text-lg | font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */ | |
| text-xl | font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */ | |
| text-2xl | font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */ | |
| text-3xl | font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */ | |
| text-4xl | font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */ | |
| text-5xl | font-size: 3rem; /* 48px */ line-height: 1; | |
| text-6xl | font-size: 3.75rem; /* 60px */ line-height: 1; | |
| text-7xl | font-size: 4.5rem; /* 72px */ line-height: 1; | |
| text-8xl | font-size: 6rem; /* 96px */ line-height: 1; | |
| text-9xl | font-size: 8rem; /* 128px */ line-height: 1; | |
| Customize |
tailwind.config.js
module.exports = {
theme: {
fontSize: {
sm: '0.8rem',
base: '1rem',
xl: '1.25rem',
'2xl': '1.563rem',
}
}
}
OR
class="text-sm/[17px]"
|
|
| Font Style | italic | font-style: italic; |
| not-italic | font-style: normal; | |
| Font Weight | font-thin | font-weight: 100; |
| font-extralight | 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 | tracking-tighter | letter-spacing: -0.05em; |
| tracking-tight | letter-spacing: -0.025em; | |
| tracking-normal | letter-spacing: 0em; | |
| tracking-wide | letter-spacing: 0.025em; | |
| tracking-wider | letter-spacing: 0.05em; | |
| tracking-widest | letter-spacing: 0.1em; | |
| Using negative values | To use a negative letter-spacing value, prefix the class name with a dash to convert it to a negative value.
class="-tracking-2" |
|
| Line Clamp | line-clamp-1 |
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
Utilities for clamping text to a specific number of lines.
|
| more | line-clamp-2, line-clamp-3, line-clamp-4, line-clamp-5, line-clamp-6, line-clamp-none | |
| Line Height | 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; | |
| more | leading-3(.75rem), leading-4(1rem), leading-5(1.25rem), leading-6(1.5rem), leading-7(1.75rem), leading-8(2rem), leading-9(2.25rem), leading-10(2.5rem) | |
| Text Color | text-transparent | color: transparent; |
| text-black, text-white |
color: rgb(0 0 0); color: rgb(255 255 255); |
|
| more | text-gray-(50-950) | |
| Text Align | text-left | text-align: left; |
| text-center | text-align: center; | |
| text-right | text-align: right; | |
| text-justify | text-align: justify; | |
| text-start | text-align: start; | |
| text-end | text-align: end; | |
| Text Decoration | underline | text-decoration-line: underline; |
| overline | text-decoration-line: overline; | |
| line-through | text-decoration-line: line-through; | |
| no-underline | text-decoration-line: none; | |
| Text Transform | uppercase | text-transform: uppercase; |
| lowercase | text-transform: lowercase; | |
| capitalize | text-transform: capitalize; | |
| normal-case | text-transform: none; | |
| Text Overflow | truncate |
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
|
| text-ellipsis | text-overflow: ellipsis; | |
| text-clip | text-overflow: clip; | |
| Text Wrap | text-wrap | text-wrap: wrap; |
| text-nowrap | text-wrap: nowrap; | |
| text-balance | text-wrap: balance; | |
| text-pretty | text-wrap: pretty; | |
| Text Indent | indent-0 | text-indent: 0px; |
| more |
indent-1 0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem) |
|
| Vertical Align | align-baseline | vertical-align: baseline; |
| more | align-top, align-middle, align-bottom, align-text-top, align-text-bottom, align-sub, align-super |
|
| Whitespace | whitespace-normal | white-space: normal; |
| more | whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap, whitespace-break-spaces |
|
| Word Break | break-normal | overflow-wrap: normal; word-break: normal; |
| more | break-words, break-all, break-keep |
|
| List Style | list-image-none | list-style-image: none; |
| list-inside | list-style-position: inside; | |
| list-outside | list-style-position: outside; | |
| list-outside | list-none, list-disc, list-decimal |
|
| Background Color | bg-transparent | background-color: transparent; |
| bg-black, bg-white |
background-color: rgb(0 0 0); background-color: rgb(255 255 255); |
|
| more | bg-gray-(50-950) | |
| Background Attachment | bg-fixed, bg-local, bg-scroll | |
| Background Position | bg-bottom, bg-center, bg-left, bg-left-bottom, , bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top | |
| Background Repeat | bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space | |
| Background Size | bg-auto, bg-cover, bg-contain | |
| Border | rounded-none | rounded-none (border-radius: 0px;) rounded(border-radius: 0.25rem; /* 4px */), rounded-sm(border-radius: 0.125rem; /* 2px */), rounded-md(border-radius: 0.375rem; /* 6px */), rounded-lg(border-radius: 0.5rem; /* 8px */), rounded-xl(border-radius: 0.75rem; /* 12px */), rounded-2xl(border-radius: 1rem; /* 16px *), rounded-3xl(border-radius: 1.5rem; /* 24px */), rounded-full(border-radius: 9999px;), more..... |
| Border Width | border-0(border-width: 0px;), border(border-width: 1px;), border-2(border-width: 2px;), border-4(border-width: 4px;), border-8(border-width: 8px;), border-x-, border-y-, border-t-, border-r-, border-b-, border-l-, more..... |
|
| Border Style | border-solid, border-dashed, border-dotted, border-double, border-hidden, border-none |
|
| Border Color | border-black, border-white, border-slate-(50-950) |
|
| Divide | Divide Width | divide-x, divide-x-0, divide-x-2, divide-x-4, divide-x-8, divide-y, divide-y-reverse, divide-x-reverse Utilities for controlling the border width between elements. |
| Divide Style | divide-solid, divide-dashed, divide-dotted, divide-double, divide-hidden, divide-none |
|
| Divide Color | divide-transparent, divide-black, divide-white, divide-slate-(50-950) |
|
| Outline | Outline Width | outline-0, outline-1, outline-2, outline-4, outline-8 |
| Outline Style | outline, outline-dashed, outline-dotted, outline-double, outline-none |
|
| Outline Color | outline-transparent, outline-black, outline-white, outline-slate-(50-950) |
|
| Box Shadow | Box Shadow | shadow, shadow-none, shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner |
| Box Shadow Color | shadow-transparent, shadow-black, shadow-white, shadow-slate-(50-950) |
|
| Opacity | Opacity | opacity-0, opacity-(0,5,10,15....100) |
| Tables | Border Collapse | border-collapse, border-separate |
| Border Spacing | border-spacing-, border-spacing-x-, border-spacing-y- (0, 1, 2, 3, 4, 5, 6 7, 8, 9, 10, 11, 12, 14, 16,20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64,72, 80, 96) |
|
| Table Layout | table-auto table-fixed |
|
| Caption Side | caption-top caption-bottom |
|
| Class | Properties | |
|---|---|---|
| Flex Basis | Flex Basis | basis-(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96)
basis-auto, basis-px, |
| basis-1/12 | (flex-basis: 8.333333%;) | |
| basis-1/6, basis-2/12 | (flex-basis: 16.666667%;) | |
| basis-1/5 | (flex-basis: 20%) | |
| basis-1/4, basis-3/12 | (flex-basis: 25%;) | |
| basis-1/3, basis-2/6, basis-4/12 | (flex-basis: 33.333333%;) | |
| basis-2/5 | (flex-basis: 40%;) | |
| basis-5/12 | (flex-basis: 41.666667%;) | |
| basis-1/2, basis-2/4, basis-3/6, basis-6/12 | (flex-basis: 50%;) | |
| basis-7/12 | (flex-basis: 58.333333%;) | |
| basis-3/5 | (flex-basis: 60%;) | |
| basis-2/3, basis-4/6, basis-8/12 | (flex-basis: 66.666667%;) | |
| basis-3/4, basis-9/12 | (flex-basis: 75%;) | |
| basis-4/5 | (flex-basis: 80%;) | |
| basis-5/6, basis-10/12 | (flex-basis: 83.333333%;) | |
| basis-11/12 | (flex-basis: 91.666667%;) | |
| basis-full | (flex-basis: 100%;) | |
| Flex Direction | 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 | flex-wrap | flex-wrap: wrap; |
| flex-wrap-reverse | flex-wrap: wrap-reverse; | |
| flex-nowrap | flex-wrap: nowrap; | |
| Flex | flex-1 | flex: 1 1 0%; Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size: |
| flex-auto | flex: 1 1 auto; | |
| flex-initial | flex: 0 1 auto; Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size: |
|
| flex-none | flex: none; Use flex-none to prevent a flex item from growing or shrinking: |
|
| Flex Grow | grow | flex-grow: 1; Use grow to allow a flex item to grow to fill any available space: |
| grow-0 | flex-grow: 0; Use grow-0 to prevent a flex item from growing: |
|
| Flex Shrink | shrink | flex-shrink: 1; Use shrink to allow a flex item to shrink if needed: |
| shrink-0 | flex-shrink: 0; Use shrink-0 to prevent a flex item from shrinking: |
|
| Order | order-(1-12) | order: 1; Utilities for controlling the order of flex and grid items. |
| order-first, order-last, order-none |
| Class | Properties | |
|---|---|---|
| Gap | gap-(0-96) | gap-x-(Horizontal), gap-y-(Vertical), Utilities for controlling gutters between grid and flexbox items. |
| 0.5(0.125rem), 1(0.25rem), 1.5(0.375rem), 2(0.5rem), 2.5(0.625rem), 3(0.75rem), 3.5(0.875rem), 4(1rem), 5(1.25rem), 6(1.5rem), 7(1.75rem), 8(2rem), 9(2.25rem), 10(2.5rem), 11(2.75rem), 12(3rem), 14(3.5rem), 16(4rem), 20(5rem), 24(6rem), 28(7rem), 32(8rem), 36(9rem), 40(10rem), 44(11rem), 48(12rem), 52(13rem), 56(14rem), 60(15rem), 64(16rem), 72(18rem), 80(20rem ), 96(24rem) | ||
| Justify Content | justify-normal | justify-content: normal; |
| justify-start | justify-content: flex-start; | |
| justify-end | justify-content: flex-end; | |
| justify-center | justify-content: center; | |
| justify-between | justify-content: space-between; | |
| justify-around | justify-content: space-around; | |
| justify-evenly | justify-content: space-evenly; | |
| justify-stretch | justify-content: stretch; | |
| Justify Items | justify-items-start | justify-items: start; |
| justify-items-end | justify-items: end; | |
| justify-items-center | justify-items: center; | |
| justify-items-stretch | justify-items: stretch; | |
| Justify Self | justify-self-auto | justify-self: auto; |
| justify-self-start | justify-self: start; | |
| justify-self-end | justify-self: end; | |
| justify-self-center | justify-self: center; | |
| justify-self-stretch | justify-self: stretch; | |
| Align Content | content-normal | align-content: normal; |
| content-center | align-content: center; | |
| content-start | align-content: flex-start; | |
| content-end | align-content: flex-end; | |
| content-between | align-content: space-between; | |
| content-around | align-content: space-around; | |
| content-evenly | align-content: space-evenly; | |
| content-baseline | align-content: baseline; | |
| content-stretch | align-content: stretch; | |
| Align Items | items-start | align-items: flex-start; |
| items-end | align-items: flex-end; | |
| items-center | align-items: center; | |
| items-baseline | align-items: baseline; | |
| items-stretch | align-items: stretch; | |
| Align Self | self-auto | align-self: auto; |
| self-start | align-self: flex-start; | |
| self-end | align-self: flex-end; | |
| self-center | align-self: center; | |
| self-stretch | align-self: stretch; | |
| self-baseline | align-self: baseline; | |
| Class | Properties | |
|---|---|---|
| Grid Basis | grid-cols-1 | grid-cols-(1- 12) grid-cols-none, grid-cols-subgrid Utilities for specifying the columns in a grid layout. |
| Grid Column Start / End | col-span-(1-12) | col-auto, Use the col-span-{n} utilities to make an element span n columns(increse size of element). |
| col-start-(1-12), col-start-auto, col-end-(1-12), col-end-auto |
Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. | |
| Grid Template Rows | grid-rows-(1-12) | Utilities for specifying the rows in a grid layout. |
| grid-rows-none, grid-rows-subgrid |
Use the grid-rows-subgrid utility to adopt the row tracks defined by the item’s parent. | |
| Grid Row Start / End | row-span-(1-12) | row-auto, Use the row-span-{n} utilities to make an element span n rows. |
| row-start-(1-12), row-start-auto, row-end-(1-12), row-end-auto |
Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. | |
| Grid Auto Flow | grid-flow-row | grid-auto-flow: row; |
| grid-flow-col | grid-auto-flow: column; | |
| grid-flow-dense | grid-auto-flow: dense; | |
| grid-flow-row-dense | grid-auto-flow: row dense; | |
| grid-flow-col-dense | grid-auto-flow: column dense; | |
| Grid Auto Columns | auto-cols-auto | grid-auto-columns: auto; |
| auto-cols-min | grid-auto-columns: min-content; | |
| auto-cols-max | grid-auto-columns: max-content; | |
| auto-cols-fr | grid-auto-columns: minmax(0, 1fr); | |
| Grid Auto Rows | auto-rows-auto | grid-auto-rows: auto; |
| auto-rows-min | grid-auto-rows: min-content; | |
| auto-rows-max | grid-auto-rows: max-content; | |
| auto-rows-fr | grid-auto-rows: minmax(0, 1fr); |
|
If you need to use a one-off aspect-ratio value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value. <iframe class="w-full aspect-[4/3]" src="https://www.youtube.com/..."> </iframe> |
tailwind.config.js
module.exports = {
theme: {
extend: {
aspectRatio: {
'4/3': '4 / 3',
},
}
}
}
|
Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities.
input.css
@layer base {
h1 {
@apply text-2xl;
}
}
*If you’re working with any third-party libraries (for example Select2) and styling that library with your own custom CSS, we recommend writing those styles without using Tailwind’s @layer feature:
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
|
Use @apply to inline any existing utility classes into your own custom CSS.
input.css
.btn {
@apply font-bold py-2 px-4 rounded !important;
}
|
Use the theme() function to access your Tailwind config values using dot notation.
input.css
.content-area {
height: calc(100vh - theme(spacing.12));
}
If you need to access a value that contains a dot (like the 2.5 value in the spacing scale),
you can use square bracket notation:
.content-area {
height: calc(100vh - theme(spacing[2.5]));
}
|
Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.{html,js}"],
theme: {
colors: {
'blue': '#1fb6ff',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
}
extend: {
spacing: {
'8xl': '96rem',
}
},
},
plugins: [],
}
|