Button
cursor-not-allowed |
bg-gradient-to-bl from-purple-500 via-yellow-500 to-green-400 |
bg-gradient-to-t |
Gradient from bottom to top |
bg-gradient-to-b |
Gradient from top to bottom |
bg-gradient-to-l |
Gradient from right to left |
bg-gradient-to-r |
Gradient from left to right |
bg-gradient-to-tl |
Gradient from bottom-right to top-left |
bg-gradient-to-tr |
Gradient from bottom-left to top-right |
bg-gradient-to-bl |
Gradient from top-right to bottom-left |
bg-gradient-to-br |
Gradient from top-left to bottom-right |
Can define custom button styles in tailwind css
1. use @layer components in global.css
@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-500 text-white font-semibold rounded shadow-md hover:bg-blue-600 transition;
}
}
2. import global path at your page
import "../styles/global.css";
ul / li
list-disc |
list-decimal |
marker (Style Numbers) |
list-inside |
<ul class="list-disc pl-6 space-y-2 marker:text-sky-400">
<li>5 cups chopped Porcini mushrooms</li>
<li>1/2 cup of olive oil</li>
<li>3lb of celery</li>
</ul>
Text align
text-left |
text-center |
text-right |
Text transforms
uppercase |
lowercase |
capitalize |
Font size
text-xs |
12px |
text-sm |
14px |
text-base |
16px |
text-lg |
18px |
text-xl |
20px |
text-2xl |
24px |
text-9xl |
128px |
text-[50px] |
Valid |
You can extend Tailwind’s font size scale in tailwind.config.js:
export default {
theme: {
extend: {
fontSize: {
'xxs': '10px',
'huge': '100px',
}
}
}
}
.astro:
<h1 class="text-huge">About</h1>
Background colors / Text colors
bg-red-400 |
text-red-400 |
bg-primary |
bg-secondary |
bg-tertiary |
bg-alt |
bg-white |
bg-black |
bg-placeholder |
text-[#a4d01e] |
bg-[#a4d01e] |
extend: {
colors:{
primary:"#1e40AF",
}
},
<div class=" bg-primary"></div>
<p class=" text-primary">About</p>
Text decoration
underline |
overline |
line-through |
decoration-red-500 |
decoration-solid |
decoration-double |
decoration-dotted |
decoration-dashed |
decoration-wavy |
decoration-0 |
decoration-1 |
decoration-2 |
decoration-4 |
decoration-8 |
<h1 class="text-blue-600 line-through decoration-red-200 decoration-wavy decoration-4">About</h1>
Font weight
font-thin |
font-extralight |
font-light |
font-normal |
font-medium |
font-semibold |
font-bold |
font-extrabold |
font-black |
Font family
font-sans (default) |
font-serif |
font-mono |
fontFamily: {
fancy: ['"Poppins"', 'sans-serif'],
code: ['"Fira Code"', 'monospace'],
},
<h1 class="font-code">Testing</h1>
Line height
leading-tight (1.25) |
leading-snug (1.375) |
leading-normal (1.5) |
leading-relaxed (1.625) |
leading-loose (2) |
leading-[1.1] |
Letter Spacing
tracking-tighter (-0.05em) |
tracking-tight (-0.025em) |
tracking-normal(0em) |
tracking-wide(0.025em) |
tracking-widest(0.1em) |
Shadow
shadow-xl |
shadow-gray-400 |
shadow-inner (Applies the shadow inside the element) |
text ✔elements ❌(div/button/image) |
boxShadow: {
'neon-green': '0px 4px 10px rgba(164, 208, 30, 0.6)',
},
<div class="shadow-neon-green w-32 h-44"></div>
Cursor
cursor-auto (default browser cursor) |
cursor-default (default arrow pointer) |
cursor-pointer (pointer hand ☝) |
cursor-text (text selection ) |
cursor-not-allowed (🚫Shows a blocked circle) |
cursor-wait (⏳Shows a loading wait cursor) |
cursor-progress (Shows a progress indicator) |
cursor-move (✥ Move cursor (for draggable elements) |
cursor-grab (🖐 Open hand cursor (grabbable) |
cursor-grabbing (✊ Closed hand cursor, while dragging) |
cursor-n-resize (⬆ Resize vertically (north) |
a lot different area resize |
cursor-none (hides the cursor) |
cursor-help (shows a question mark cursor) |
cursor-zoom-in (🔍➕) |
cursor-zoom-out (🔍➖) |
Position
absolute |
relative |
fixed |
ticky |
left / top / right / bottom |
Blend modes
mix-blend-normal (default, no blend) |
mix-blend-multiply (multiply, darken effect) |
mix-blend-screen (screen, lighten effect) |
mix-blend-overlay (overlay, contrast effect) |
mix-blend-darken (darken) |
mix-blend-color-dodge (color dodge) |
mix-blend-color-burn (color burn) |
mix-blend-difference (difference) |
mix-blend-exclusion (exclusion 排除) |
mix-blend-hue (hue 色调) |
mix-blend-saturation (saturation饱和) |
mix-blend-color (color) |
mix-blend-luminosity (luminosity亮度) |
Other
whitespace-nowrap (Prevents text from wrapping to the next line.) |
overflow-hidden (Hides overflowing content (anything that goes beyond the container).) |
|
|
Width
w-auto |
w-5 |
h-auto |
h-5 |
w-1/2 |
w-1/3 |
w-2/4 |
h-1/2 |
h-1/3 |
h-2/4 |
w-full |
w-screen |
h-full |
h-screen |
w-10p (Invalid) |
width:{
"width":"10%",
},
height:{
"height":"50%",
},
<div class="bg-primary w-width h-height">Background</div>
Pseudo-classess
hover: |
focus: |
active: |
select: |
file: |
print: |
first-letter |
first-line |
landscape: |
portrait: |
dark: |
marker: |
visited: |
disabled: |
checked: |
invalid |
valid |
required: |
placeholder-shown: |
placeholder: |
peer-in-range: |
peer-out-of-range: |
sm: |
md: |
lg: |
xl: |
2xl: |
<input
type="file"
class="file:mr-4 file:rounded-full file:border-5 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700"
/>
only work for file
Aspect Ratios
Aspect-auto (Default based on content) |
Aspect-square (1:1 square) |
Aspect-video (16:9 video) |
Aspect-widescreen (21:9 ultrawide) |
Aspect-[4/3] (4:3 old TV) |
Aspect-[3/2] (3:2 photo) |
Padding & Margin
p-0 (no padding) |
p-8 |
p-8 |
pt-1 |
pr-5 |
pb-2 |
pl-2 |
px-1 (padding left & right) |
py-2 (padding top & bottom) |
m-auto (used to center element horizontally) |
-mx-4 |
-mt-3 |
-m-2 |
padding use p-
margin use m-
p-auto (Invalid)
margin can support negative, but -m-auto (Invalid).
Border & ring
border default 1px border |
border-0 |
border-2 |
border-4 |
border-8 |
border-t |
border-r |
border-b-5 |
border-l-2 |
border-green-400 |
border-solid (default) |
border-dashed |
border-dotted |
border-double |
ring-3 |
ring-blue-400 |
Rounded
rounded-none |
rounded-sm |
rounded |
rouonded-md |
rounded-lg |
rounded-xl |
rounded-2xl |
rounded-3xl |
rounded-full |
rounded-t |
rounded-r |
rounded-l |
rounded-b |
-> Can add size (rounded-t-lg) |
Animation
ease-linear |
ease-in |
ease-out |
ease-in-out |
transition-all |
duration-500 |
delay |
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg transition-all duration-500 ease-out hover:scale-110">
Hover Me
</button>
<div class="w-32 h-32 bg-red-500 transform translate-x-[-100px] transition-all duration-700 ease-out hover:translate-x-0">
Slide In
</div>
<div class="opacity-100 transition-opacity duration-700 ease-out hover:opacity-0">
Fade Out on Hover
</div>
Display : flex (justify-content)
justify-end (col: right) |
items-end (row: bottom) |
justify-start / justify-normal / items-start / (position: left) |
items-center (row: center) |
justify-center (col: center) |
justify-evenly (same equal space) |
justify-between (first item align to first, and last item align to the last. The remain space equals. |
justify-around (equal between item, half of the middle space at the first and last item) |
items-stretch ( stretches items vertically to fill the parent container's height (Only works if the items don't have a fixed height (h-3) |
flex-col (arrange its items vertically (column direction)) |
* space-y-5 (to add place between the column [vertical) |
* space-x-5 (to add place between the column [horizontal]) |
gap-3 (sets the space between child elements inside a flexbox, grid, or gap-supported layout.) |
gap-x-3 (horizontal spacing [left-right]) |
gap-y-2 (vertical spacing [top-bottom]) |
<div class="flex gap-4 bg-gray-200 p-4">
<div class="bg-blue-500 p-4 w-1/3 h-16">Item 1</div>
<div class="bg-red-500 p-4 w-1/3 h-16">Item 2</div>
<div class="bg-green-500 p-4 w-1/3 h-16">Item 3</div>
</div>
*must set width and height. *
Display : flex (flex-wrap)
flex-wrap |
flex-wrap:wrap; |
flex-wrap-reverse |
flex-wrap:wrap-reverse; |
flex-nowrap |
flex-wrap:nowrap |
nowrap: Every item is fit to a single line.
wrap: Items wrap around to additional lines.
wrap-reverse: Items wrap around to additional lines in reverse.
Display : flex (flex-direction)
row: Items are placed the same as the text direction. ( |
row-reverse: Items are placed opposite to the text direction. (right) |
column: Items are placed top to bottom. |
column-reverse: Items are placed bottom to top. |
Display : flex (flex-flow)
The flex-flow property is a shorthand for both flex-direction and flex-wrap.
Display : flex (align-content)
content-start |
align-content: flex-start; |
content-end |
align-content: flex-end; |
content-center |
align-content: center; |
content-between |
align-content: space-between; |
content-around |
align-content: space-around; |
content-evenly |
align-content: space-evenly; |
content-stretch |
align-content: stretch; |
content-start: Rows align at the top.
content-end: Rows align at the bottom.
content-center: Rows align in the middle.
content-between: Rows spread evenly with space between them.
content-around: Rows have equal space around them.
content-evenly: Rows are evenly spaced in the container.
content-stretch: Rows stretch to fill the container height.
Display : flex (align-items)
items-start |
align-items:flex-start; |
items-end |
align-items:flex-end; |
items |
align-items:center; |
items-baseline |
align-items:baseline; |
items-stretch |
align-items:stretch; (default) |
flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container. (default)
Display : flex (order)
Each order has a default order of 0.
Lower order values appear first, while higher values appear later.
We can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).
Display : flex (self)
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; |
self-baseline |
align-self:baseline; |
align-items affects all flex items inside the container.
align-self overrides align-items but only for the specific item you apply it to.
Display : grid
justify-start (align the entire grid to the left of the container) |
justify-end (align the entire grid to the right of the container) |
justify-center (center the entire grid inside its container) |
justify-between (distributes items evenly inside the grid container) |
grid-cols-3 (set column as 3) [grid-col-start: 2;] |
grid-rows-4 (set row as 4) [grid-row-start: 2;] |
col-start-2 / row-start-2 [grid-column-start: 2] (Starts the element at column 2) |
col-end-4 / row-end-4 [grid-row-start: 2] (Ends at column 4, not including column 4 itself) |
CSS: grid-column-start:2; / grid-column-start:4; |
col-span-2 (Makes the item span 2 columns instead of specifying col-end directly) [grid-column-end:span 2] |
gap-3 (sets the space between child elements inside a flexbox, grid, or gap-supported layout.) |
gap-x-3 (horizontal spacing [left-right]) |
gap-y-2 (vertical spacing [top-bottom]) |
<div class="grid mt-5 grid-cols-2 gap-x-5 bg-gray-200 h-40 p-4 ">
<div class="rounded-full bg-blue-500"></div>
</div>
* no need set the h and w *
<div class="w-full bg-[#e8f0f7] grid gap-20 mt-20 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
</div>
grid-cols-1 → Defaults to 1 column on extra-small screens.
sm:grid-cols-2 → Changes to 2 columns on small screens (≥ 640px).
lg:grid-cols-3 → Changes to 3 columns on large screens (≥ 1024px).
|
