Tailwind CSS v4: more packages and new Vite support

More packages - but why?

In Tailwind CSS v3, the tailwind.config.js file was still required. To make creating it easier, a CLI init process was available: npx tailwindcss init -p.

Starting with v4, the tailwind.config.js file is no longer needed (more on that here: What is the CSS-first configuration), and therefore the init process for generating it is no longer necessary either. As a result, there's no longer any justification to bundle the entire CLI ecosystem into every project - especially those that integrate Tailwind CSS via PostCSS or a Vite plugin instead of using the CLI.

Separated package for Tailwind CLI

It made sense to separate the CLI into its own package, now named @tailwindcss/cli, which only needs to be installed by those who want to use the Tailwind CLI.

$ npm install tailwindcss @tailwindcss/cli

• Install Tailwind CLI

$ npx tailwindcss -i input.css -o output.css$ npx @tailwindcss/cli -i input.css -o output.css

Separated package for PostCSS integration

Once the CLI was separated, it became obvious that the PostCSS plugin should also be isolated. It was moved into a separate package named @tailwindcss/postcss, which only needs to be installed by those integrating Tailwind via PostCSS.

$ npm install tailwindcss @tailwindcss/postcss postcss

• Install Tailwind CSS using PostCSS
• Custom guide to Next.js - Install Tailwind CSS using PostCSS
• Custom guide to Laravel Mix - Install Tailwind CSS using PostCSS

export default {  plugins: {    "postcss-import": {},    tailwindcss: {},    autoprefixer: {},    "@tailwindcss/postcss": {},  },};

$ npm uninstall postcss-import autoprefixer

New Vite plugin

Up to v3, Vite users could install Tailwind CSS via PostCSS. But this changed in v4, which introduced a dedicated plugin for direct Vite integration under the new package name @tailwindcss/vite. This means Vite users no longer need to rely on PostCSS to use Tailwind CSS.

  # If your Vite project does not exist yet$ npm create vite@latest my-app-name$ cd my-app-name$ npm install tailwindcss @tailwindcss/vite

• Scaffolding Your First Vite Project
• Install Tailwind CSS using Vite
• Custom guide to Laravel - Install Tailwind CSS using Vite

Installation fails based on an old online tutorial

Accordingly, all official installation guides have been updated. However, caution is needed when following outdated, unofficial tutorials found online. Running npm install tailwindcss now installs the new v4 version, which no longer includes the init process and doesn't use tailwind.config.js, even if you create it manually.

  # Do not use it; just an example of incorrect usage starting from January 2025$ npm install tailwindcss postcss autoprefixer$ npx tailwindcss init -p> Error: tailwindcss not recognized

• Problem installing Tailwind CSS after npx tailwindcss init -p command

How to install old Tailwind CSS v3?

If you want to follow guides written for Tailwind CSS v3, you must perform a version-specific installation, as now noted in the updated v3 documentation:

$ npm install tailwindcss@3$ npx tailwindcss init

• Get started with Tailwind CSS v3
• tailwindlabs/tailwindcss.com #2022 - Use tailwindcss@3 in v3 docs

Although Tailwind CSS v3 installation often appears as the first recommendation in many places, I believe that if the browser support offered by v4 (which is quite broad but not critical) is acceptable for your project, you should definitely base your work on v4. It receives active maintenance and will continue to evolve in the coming times.