Tailwind CSS: Complete Definition and Guide

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that takes a radically different approach from traditional frameworks like Bootstrap or Foundation. Instead of providing predefined components (buttons, cards, navbars), Tailwind provides low-level atomic CSS classes: flex, pt-4, text-center, bg-blue-500. Developers compose these classes directly in HTML to create fully custom designs.

Created by Adam Wathan in 2017, Tailwind CSS was born from frustration with the limitations of component-based CSS frameworks. With Bootstrap, for example, all sites end up looking similar, and customization requires overriding default styles, creating CSS technical debt. Tailwind eliminates this problem by imposing no default styles: every design is unique.

At KERN-IT, Tailwind CSS is our reference CSS framework for all new projects. It is at the heart of our Wagtail CMS and our React applications. Combining Tailwind with our technical stack (Django, Wagtail, React) allows us to produce custom, visually distinctive, and perfectly optimized web interfaces.

Why Tailwind CSS matters

CSS is often considered the poor relation of web development. Projects accumulate thousands of lines of unused CSS, inconsistent naming conventions, and unmaintainable files. Tailwind CSS solves these structural problems.

• No dead CSS: Tailwind uses a purge tool (PurgeCSS, integrated since Tailwind 3) that analyzes your HTML and removes all unused classes from the final bundle. CSS in production typically weighs less than 10 KB gzipped, regardless of project size.
• Design consistency: the design token system (colors, spacing, font sizes) defined in tailwind.config.js ensures visual consistency across the entire application. No more guessing values: p-4 always means 1rem of padding.
• Increased productivity: developers never leave the HTML/JSX file to style an element. The workflow is uninterrupted, and Tailwind autocompletion in IDEs further accelerates the process.
• Native responsive design: responsive prefixes (sm:, md:, lg:, xl:) enable creating adaptive layouts without writing manual media queries. Every utility class can be conditioned by a breakpoint.
• Unlimited customization: unlike Bootstrap where customizing a button requires overriding dozens of properties, Tailwind enables creating exactly the desired design, pixel by pixel.

How it works

Tailwind CSS works as a CSS processor that generates utility classes from a configuration file. At the heart of the system is the tailwind.config.js file, which defines the project's design system: color palette, spacing scales, fonts, breakpoints, and custom extensions.

Tailwind's build process analyzes source files (HTML, JSX, Django templates) to identify used classes, then generates only the corresponding CSS. This Just-in-Time (JIT) mechanism, enabled by default since Tailwind 3, even allows generating arbitrary values on the fly: w-[347px] or bg-[#1da1f2].

Tailwind's architecture relies on PostCSS, a CSS transformation tool. The directives @tailwind base, @tailwind components, and @tailwind utilities in the source CSS file are replaced by corresponding styles during the build. PostCSS plugins like postcss-import and postcss-nested enable CSS imports and nested selectors.

For repetitive patterns, the @apply directive allows extracting groups of utility classes into custom CSS classes. However, best practices recommend using this feature sparingly and favoring component extraction (in React, for example) over CSS class extraction.

Real-world example

KERN-IT's Wagtail CMS is a perfect example of Tailwind CSS usage in production. Our tailwind.config.js defines a complete design system with custom fonts (FKGrotesk for body text, Gelica for accents), a bespoke color palette (primary, secondary, light, dark), and a custom plugin for responsive headings with sizes that fluidly adapt between 480px and 1400px viewport width.

For a business platform project in the web2print sector, KERN-IT used Tailwind CSS with React to create an online document editor. The interface needed to be both complex (toolbars, side panels, preview area) and intuitive. Tailwind allowed rapid prototyping of different layout variations, testing color combinations, and iterating on design in real time, without wasting time in separate CSS files.

Tailwind also excels for marketing pages and landing pages. KERN-IT creates SEO-optimized landing pages in Wagtail using StreamField blocks styled with Tailwind. Each block (hero, testimonials, FAQ, call-to-action) is a reusable component with consistent, responsive Tailwind design.

Implementation

1. Installation: install Tailwind via npm with npm install -D tailwindcss postcss autoprefixer and initialize the configuration with npx tailwindcss init -p.
2. Configuration: define source file paths in content of tailwind.config.js. Customize the theme with your colors, fonts, and spacing in the extend section.
3. Base CSS file: create a CSS file with the @tailwind base, @tailwind components, and @tailwind utilities directives. Add your custom base styles in the base layer.
4. Framework integration: for Django/Wagtail, use django-tailwind. For React, integrate Tailwind into the Vite or webpack configuration. Enable watch mode in development.
5. Plugins: install official plugins as needed: @tailwindcss/forms for forms, @tailwindcss/typography for rich content, @tailwindcss/aspect-ratio for aspect ratios.
6. Production: ensure the production build process uses CSS purging to eliminate unused classes. The result should be a CSS file of just a few kilobytes.

Associated technologies and tools

• React: KERN-IT's frontend library, combined with Tailwind for component styling.
• PostCSS: CSS transformation tool on which Tailwind is built.
• Wagtail/Django: KERN-IT's CMS and backend framework, integrated with Tailwind via django-tailwind.
• Headless UI: unstyled, accessible component library designed for Tailwind CSS.
• Heroicons: SVG icon library from the same creator as Tailwind, perfectly integrated.
• Prettier plugin Tailwind: automatically sorts Tailwind classes in a consistent order.

Conclusion

Tailwind CSS has transformed how developers write CSS. Its utility-first approach eliminates the structural problems of traditional CSS (dead code, inconsistency, maintainability) while offering total design freedom. At KERN-IT, Tailwind is a central element of our technical stack, integrated in both our Wagtail CMS and our React applications. Its combination with a well-defined design system allows us to produce custom, visually unique, and technically optimized web interfaces that set our clients apart from their competitors.