Tailwind CSS

Tailwind CSS is a styling framework that takes a different approach from traditional CSS: instead of writing custom style rules in separate files, you apply small, single-purpose utility classes directly in your HTML. Need a blue background with rounded corners and some padding? You add bg-blue-500 rounded-lg p-4 right on the element. Tailwind’s build process is smart enough to scan your project and only include the styles you actually use, keeping the final CSS file small and fast.

The Simple Version

Normally when you want to make a button blue with rounded corners, you’d write CSS rules in a separate file and link them to your HTML. With Tailwind, you skip the separate file and write the styles directly: bg-blue-500 rounded-lg px-4 py-2. Each class does one thing, and you combine them to build any design.

It’s like LEGO for styling. Small, single-purpose pieces that snap together.

Why It Matters

Tailwind eliminates the back-and-forth between HTML and CSS files. You see exactly what a component looks like by reading its class names. This makes it faster to build and easier to maintain, especially when working with an AI coding assistant that can read the styles in context.

How It’s Used on This Site

Every page on scottkrukowski.com is styled with Tailwind CSS. The navy color scheme, the Playfair Display headings, the responsive layouts, the hover effects on cards, all built with Tailwind utility classes.

Try It

Tailwind CSS is free and open source.