MainAdvanced Examples
Tailwind CSS is a utility-first CSS framework for rapidly building custom UIs. It offers atomic classes for styling elements without leaving your HTML.
NOTE: Tested using the latest version at time of writing, v4
Core Concepts
- Utility-first: Style elements using single-purpose classes.
- Responsive: Use breakpoint prefixes like
sm:,md:,lg:,xl:. - Mobile-first: Base classes apply to mobile, then layer up.
- Arbitrary values: Use square brackets for custom values. Example:
mt-[22px],bg-[#1a1a1a].
Layout
- Container:
container,mx-auto,max-w-screen-md - Box sizing:
box-border,box-content - Display:
block,inline-block,flex,grid,hidden - Position:
static,relative,absolute,fixed,sticky - Z-Index:
z-0toz-50, or custom:z-[9999]
Flex & Grid
- Flexbox:
flex,flex-row,flex-col,items-center,justify-between,flex-wrap - Grid:
grid,grid-cols-3,gap-4,place-items-center
Spacing
- Margin:
m-4,mt-2,mx-auto,-ml-1 - Padding:
p-4,pt-1,px-6 - Gap:
gap-2,gap-x-4,gap-y-1
Sizing
- Width:
w-full,w-screen,w-[450px] - Height:
h-10,min-h-screen,h-fit - Max/Min:
max-w-md,min-h-[300px]
Typography
- Font size:
text-xs,text-sm,text-lg,text-2xl - Font weight:
font-light,font-bold,font-black - Text color:
text-gray-700,text-red-500,text-white - Line height:
leading-tight,leading-[1.6] - Letter spacing:
tracking-wide,tracking-tight - Text align:
text-left,text-center,text-justify
Backgrounds
- Color:
bg-blue-500,bg-gray-900,bg-white/80 - Image:
bg-[url('/bg.svg')],bg-cover,bg-center,bg-no-repeat
Borders & Shadows
- Border:
border,border-2,border-gray-300,border-dashed - Border radius:
rounded,rounded-lg,rounded-[12px] - Box shadow:
shadow,shadow-md,shadow-lg,shadow-none
Effects & Transitions
- Opacity:
opacity-50,opacity-0,opacity-100 - Mix blend:
mix-blend-multiply,mix-blend-screen - Transition:
transition,duration-300,ease-in-out,hover:transition-colors
Interactivity & State
- Hover:
hover:bg-blue-600,hover:underline - Focus:
focus:outline-none,focus:ring-2,focus:ring-blue-500 - Active/Disabled:
active:scale-95,disabled:opacity-50
Lists
list-none,list-disc,list-decimal,list-inside,list-outside
Overflow & Scroll
overflow-hidden,overflow-auto,overflow-scroll- Scroll snap:
snap-x,snap-start,snap-mandatory
Transforms
transform,scale-105,rotate-45,translate-x-2
Utilities
- Cursor:
cursor-pointer,cursor-not-allowed - Select:
select-none,select-text - Pointer events:
pointer-events-none,pointer-events-auto
Dark Mode
- Use
dark:prefix to style in dark mode. - Example:
dark:bg-gray-800,dark:text-white - Configure in
tailwind.config.jsas'media'or'class'
Customizing Tailwind
- Extend via
tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
brand: '#1e40af'
},
},
},
plugins: [],
};
Plugins
- First-party: forms, typography, aspect-ratio, line-clamp
- Use like:
@tailwindcss/forms, thenplugin: [require('@tailwindcss/forms')]
Use Tailwind to build layouts directly in your markup with precision. Remember: no custom class names, just compose.
For full documentation, see https://tailwindcss.com/docs
Frequently Asked Questions
FAQ
What is the difference between Tailwind and Bootstrap?
Unlike Bootstrap, Tailwind doesn’t come with predefined UI components. It isn't a compoonoent library. It simply provides low-level utility classes you compose into custom designs.
Can I use Tailwind with CSS-in-JS or styled-components?
Yes, but it’s usually redundant. Tailwind replaces the need for CSS-in-JS in most cases. However, you can use Tailwind class names within styled-components if needed.
Does Tailwind increase my final CSS bundle size?
No. Tailwind uses a Just-In-Time (JIT) engine that generates only the CSS you use in your HTML/JSX. Unused styles are purged automatically.
Related Concepts
- Utility-First CSS: Why Tailwind embraces utility classes over custom styles
- CSS Specificity: How Tailwind avoids specificity wars with atomic classes
- Responsive Design: How Tailwind makes mobile-first design intuitive