Tailwind CSS in Practice

Tailwind CSS is a utility-first framework that speeds up development with composable utility classes.

Setup:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuration:

// tailwind.config.js
module.exports = {
content: ["./src/**/*.{astro,js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
primary: '#0ea5e9',
secondary: '#64748b',
},
fontFamily: {
serif: ['Cormorant Garamond', 'serif'],
},
},
},
plugins: [],
}

Practical Components:

Button Component:

<button class="
px-4 py-2
bg-blue-600 hover:bg-blue-700
text-white font-medium
rounded-lg
transition-colors duration-200
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed
">
Click Me
</button>

Card Component:

<div class="
max-w-sm
bg-white
rounded-xl
shadow-md
overflow-hidden
hover:shadow-lg
transition-shadow
">
<img class="w-full h-48 object-cover" src="image.jpg" alt="Card image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-2">
Card Title
</h3>
<p class="text-gray-600 mb-4">
Card content goes here. This is a reusable component built with Tailwind.
</p>
<button class="
px-4 py-2
bg-gray-100 hover:bg-gray-200
text-gray-800
rounded-lg
text-sm font-medium
transition-colors
">
Read More
</button>
</div>
</div>

Responsive Navigation:

<nav class="
bg-white shadow-sm
px-4 sm:px-6 lg:px-8
py-3
">
<div class="flex justify-between items-center">
<div class="text-xl font-bold text-gray-900">
Logo
</div>

<!-- Mobile menu button -->

<button class="sm:hidden p-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linecap="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>

<!-- Desktop menu -->


<div class="hidden sm:flex sm:items-center sm:space-x-6">
<a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
<a href="#" class="text-gray-700 hover:text-gray-900">About</a>
<a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
</div>
</div>
</nav>

Dark Mode:

<div class="
bg-white dark:bg-gray-800
text-gray-900 dark:text-gray-100
border border-gray-200 dark:border-gray-700
transition-colors duration-200
">
This component adapts to dark mode
</div>