Installation and Configuration

Installing Tailwind takes three commands, yet it's the step where people lose the most time. The scenario is always the same: everything works in development, you deploy, and half of your styles have vanished in production. Or a color defined in your configuration stubbornly gets ignored. Or autocomplete suggests nothing and you type text-grey-500 for twenty minutes before realizing the palette is spelled gray.

These three symptoms share the same root cause: Tailwind only knows the classes it has seen written out in full in your source files. It isn't an engine that interprets your application at runtime; it's a tool that reads text at build time. Until that model is clear, every incident looks like black magic. Once it is, three quarters of installation problems can be diagnosed in ten seconds.

Setting Up in a Vite Project

This is the most common case, and the fastest, whether your project uses React, Vue, Svelte, or Astro. Two packages, one plugin, one line of CSS.

npm install tailwindcss @tailwindcss/vite

Register the plugin in your Vite configuration: