Tailwind CSS: Rapid UI Development

Fri, 05 Mar 2021 00:00:00 +0000

Tailwind CSS is a utility-first framework-you compose designs from small classes in markup instead of writing custom CSS files for every component.

Why Teams Adopt Tailwind

Development speed increases when you do not context-switch between JSX and separate stylesheets. Design tokens (spacing, colors, typography) stay consistent through configuration. PurgeCSS removes unused classes in production builds.

Example Component

function Card({ title, children }) {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow">
      <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
      <div className="mt-2 text-gray-600">{children}</div>
    </div>
  );
}

Customizing the Theme

Extend tailwind.config.js with brand colors and fonts. Use @apply sparingly in CSS modules for repeated patterns.

CSS Grid Layout: Building Responsive Designs

Sun, 14 Jun 2020 00:00:00 +0000

CSS Grid is a two-dimensional layout system-rows and columns together-making it ideal for page layouts, dashboards, and card grids that Flexbox alone struggles with.

Defining a Grid

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.sidebar { grid-column: 1; grid-row: 2; }
.main    { grid-column: 2; grid-row: 2; }

Responsive Patterns

Use repeat(auto-fit, minmax(280px, 1fr)) for card layouts that reflow without media queries. Named grid areas improve readability:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}

Grid vs Flexbox

Use Grid for page-level structure; use Flexbox for aligning items inside a component (nav links, button groups). They complement each other.

Css on David Lang