Search code examples
reactjstailwind-cssvite

Error when adding Tailwind CSS to an existing React - vite project

I'm working on a React project based on Vite. I want to add Tailwind CSS, and after following the steps below, I'm encountering an error.

1. npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS

2. npx tailwindcss init -p

The first command executed without errors. However, the second command resulted in the following error:

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\HelloWorld\AppData\Local\npm-cache\_logs\2025-02-14T17_30_29_652Z-debug-0.log

I tried by clear npm,

Clear npm Cache

It still didn't work. same error when run 2nd one.

Solution

  • TailwindCSS v3

    The installation of TailwindCSS v3 and v4 is different. You were expecting the v3 installation, but v4 is the new latest version. For v3 installation, use:

    npm install -D tailwindcss@3

    TailwindCSS v4

    However, if you want to install v4, I recommend reviewing the installation guides, as there are significant breaking changes between v3 and v4.

    npm install tailwindcss @tailwindcss/vite

    Starting from v4, there is no need for an init process, as it has been completely removed. The npx tailwindcss command is also no longer required, as it has been separated into a dedicated @tailwindcss/cli package.

    For Vite, a dedicated @tailwindcss/vite plugin has been created, while compatibility with PostCSS is ensured by the @tailwindcss/postcss plugin.

    There is no need for Autoprefixer or PostCSS. V4 is built on a completely new engine, LightningCSS, and as a result, it no longer supports Sass, Less, or Stylus preprocessors.

    v4 is designed for the long term, which is why the minimum browser requirements have been significantly increased. This is primarily justified by the use of great CSS features that have been available for a few years, such as oklch(), color-mix(), @property, and others. Check the minimum requirements here: TailwindCSS v4 Browser Support

    Starting from v4, a CSS-first configuration is applied by default. However, it is possible to revert to the legacy JavaScript-based configuration using the @config directive. Because of this, a tailwind.config.js file is no longer required by default.