Visual AnythingOpen the live map →

Codebase maps / tailwindlabs/tailwindcss

The Tailwind CSS codebase, as a map.

Tailwind CSS is a TypeScript core, a fast engine written in Rust, and one small package for each build tool. Here is how they fit together - and the whole repository as a map you can open and explore.

Explore Tailwind CSS in 3D — free →tailwindlabs/tailwindcss on GitHub
The Tailwind CSS repository as a map: every folder and file, grouped by package

How Tailwind CSS is organized

Tailwind CSS is a utility-first CSS framework for rapid UI development. These are the parts of its repository, and what each one does.

packages/tailwindcss

The core. It reads your CSS, takes the class names found in your project, and writes the CSS for each one. Every utility class is defined in src/utilities.ts and every modifier (hover:, md:, dark:) in src/variants.ts.

crates/oxide

The engine written in Rust (tailwindcss-oxide). It scans your project's files and pulls out every class name you might be using - fast.

theme.css and preflight.css

The default design tokens - colors, spacing, fonts - and the base styles that even out browsers' defaults.

Build tool plugins

@tailwindcss-vite, @tailwindcss-postcss, @tailwindcss-webpack and @tailwindcss-turbopack run Tailwind inside each of those tools.

packages/@tailwindcss-cli

The tailwindcss command-line tool, for projects without a bundler.

packages/@tailwindcss-upgrade

The upgrade tool that moves a project to the current version of Tailwind.

packages/@tailwindcss-browser

Tailwind running right in the browser, for quick prototypes without a build step.

integrations/

Tests that run Tailwind through each tool - the CLI, PostCSS, Vite, webpack, Turbopack and the upgrade tool.

Where to start reading

Open these in the live map - click a file to read it beside the map, and point at it to see what it imports.

  1. packages/tailwindcss/src/index.ts - the entry point: compile your CSS, then build the classes it finds
  2. packages/tailwindcss/src/candidate.ts - how a class name like hover:bg-blue-500 is taken apart
  3. packages/tailwindcss/src/utilities.ts - every utility class, defined in one place
  4. packages/tailwindcss/theme.css - the default colors, spacing and fonts

Good to know

Is this the official Tailwind CSS repository?

Yes: github.com/tailwindlabs/tailwindcss, where Tailwind CSS is developed.

Is the map up to date?

The live map reads the repository when you open it, so it always shows the current code. The picture on this page was made on October 28, 2026.

Can I map my own project like this?

Yes. Paste any public GitHub link, or open a folder on your computer - your own code never leaves your device.