CSS and Tailwind CSS - Styling Modern Web Applications

CSS (Cascading Style Sheets) controls the visual presentation of web pages. Mastering CSS is essential for every front-end developer.

Tailwind CSS is a utility-first CSS framework that provides pre-built classes to style elements directly in your HTML, speeding up UI development dramatically.

This tutorial covers core CSS concepts and how Tailwind CSS simplifies styling with its powerful utility classes and responsive design system.

CSS Flexbox

Flexbox is a one-dimensional layout model that makes it easy to align and distribute items in a container, either in a row or column.

/* Center items with flexbox */
.container {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  gap: 16px;
}

/* Responsive flex wrap */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px; /* grow, shrink, basis */
}

Flexbox is best for one-dimensional layouts — arranging items in a single row or column with alignment control.

CSS Grid

CSS Grid is a two-dimensional layout system that allows you to create complex layouts with rows and columns simultaneously.

/* Responsive grid layout */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Named grid areas */
.page-layout {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 250px 1fr;
}

CSS Custom Properties (Variables)

CSS custom properties allow you to define reusable values that can be used throughout your stylesheet, making theming and maintenance much easier.

:root {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-size-base: 16px;
  --spacing-md: 1rem;
  --border-radius: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
}

Tailwind CSS Utility Classes

Tailwind CSS provides low-level utility classes to build designs without leaving your HTML. Instead of writing custom CSS, you apply classes like flex, text-center, and bg-blue-500 directly.

<div class="max-w-sm rounded-xl shadow-lg overflow-hidden bg-white">
  <img class="w-full h-48 object-cover" src="/image.jpg" alt="Card image">
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-800 mb-2">Card Title</h2>
    <p class="text-gray-600 text-sm leading-relaxed">
      Card description goes here with some supporting text.
    </p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
      Read More
    </button>
  </div>
</div>

Tailwind's responsive prefixes like sm:, md:, lg: make it easy to build mobile-first responsive designs without writing media queries manually.

Benefits of Tailwind CSS

• Utility-first approach eliminates context switching between HTML and CSS
• Built-in responsive design system with mobile-first breakpoints
• Highly customizable via tailwind.config.js
• No unused CSS in production with automatic purging
• Consistent design tokens for spacing, colors, and typography
• Works well with React, Vue, Angular, and plain HTML

Conclusion

CSS is the foundation of web design, and Tailwind CSS supercharges it with a utility-first workflow that's fast, consistent, and scalable.

Master flexbox, grid, and CSS variables as fundamentals, then use Tailwind CSS to build professional interfaces faster and with less custom code.