Tailwind CSS Utility-First Approach
Apply pre-built utility classes directly in HTML, customise the theme in tailwind.config.js, and use @apply to extract repeated patterns.
Tailwind CSS Utility-First Approach is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Utility-First CSS?
Tailwind CSS provides pre-built utility classes for every CSS property. Instead of writing custom CSS, you compose styles by adding utility classes directly in HTML. One class = one CSS declaration.
Installing Tailwind
Install Tailwind and initialise the config. Vite projects use the Tailwind Vite plugin or PostCSS plugin.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
# Or with Vite plugin:
npm install -D @tailwindcss/viteUtility Classes in Action
Build a card using only Tailwind utility classes. No custom CSS file needed.
<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
<img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
<h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
<p class="text-gray-500 mt-2">Card description goes here.</p>
<button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
Read More
</button>
</div>Responsive Prefixes
Add responsive breakpoint prefixes. md: applies on medium screens and up. lg: on large. Tailwind is mobile-first.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">State Variants
Prefix classes with state variants: hover:, focus:, active:, disabled:, dark:.
<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">Configuring the Theme
Customise colours, spacing, fonts, and breakpoints in tailwind.config.js. Extend the default theme or replace parts of it.
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand: { 500: '#6366f1', 600: '#4f46e5' }
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans]
}
}
}
}@apply — Extracting Patterns
Use @apply in CSS files to compose utility classes into a reusable CSS rule. Use sparingly — direct utility classes are preferred for most cases.
/* Only for highly repeated patterns */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-indigo-600 text-white rounded-md
hover:bg-indigo-700 transition-colors font-medium;
}
}Purging Unused CSS
Tailwind generates thousands of utility classes. In production, it scans your source files and removes every class that isn't used, resulting in tiny CSS files (often under 10KB).
Tailwind With React/Vue
In React, use cn() (clsx + twMerge) to conditionally apply Tailwind classes without conflicts. In Vue, use :class bindings.
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
function cn(...classes: string[]) { return twMerge(clsx(classes)); }
<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>Tailwind IntelliSense
Install the Tailwind CSS IntelliSense VSCode extension for autocomplete, class name preview on hover, and linting of unknown classes. Dramatically improves the Tailwind development experience.
Tailwind Criticism and Defense
Critics: HTML becomes cluttered with many classes, harder to read. Defense: You never write CSS, all styles are co-located, and the design system is enforced via the config. Most teams that try Tailwind consistently report higher productivity.
Quick Check
How does Tailwind handle production bundle size given it generates thousands of utility classes?
Recap: Tailwind CSS
Utility-first: one class = one CSS property. No custom CSS needed for most cases. Responsive and state prefixes (md:, hover:). Customise with tailwind.config.js. @apply for repeated patterns. Production build scans and purges unused classes. Use cn() + twMerge for conditional classes in React. Install IntelliSense extension.
Frequently asked questions
Is the “Tailwind CSS Utility-First Approach” lesson free?
Yes — the full text of “Tailwind CSS Utility-First Approach” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Tailwind CSS Utility-First Approach”?
Apply pre-built utility classes directly in HTML, customise the theme in tailwind.config.js, and use @apply to extract repeated patterns. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Tailwind CSS Utility-First Approach” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- BEM Methodology: Block Element Modifier
- CSS Modules: Scoped Class Names
- CSS-in-JS: Styled-components and Emotion
- Tailwind CSS Utility-First Approach