npx tailwindcss init -p 에러

에러발생..

npm error could not determine executable to run npm error A complete log of this run can be found in: /Users/xxx/.npm/_logs/xxx-xx-17T05_26_44_563Z-debug-0.log

 

tailwindcss 추가하고

npm install -D tailwindcss postcss autoprefixer

 

초기화 진행시..

npx tailwindcss init -p

 

다음과 같은 에러가 발생한다.

npm error could not determine executable to run
npm error A complete log of this run can be found in: /Users/xxx/.npm/_logs/xxx-xx-17T05_26_44_563Z-debug-0.log

 

25년 1월 말 기준으로 Tailwind CSS 4.0이 업데이트되며 공식 문서가 4.0 기준으로 변경되었기 때문이다.

 

tailwindcss ver 3 으로 진행해야 함.

npm install -D tailwindcss@3

npx tailwindcss init -p

 

 

tailwindcss ver 4 로 진행하기

npm install tailwindcss@latest @tailwindcss/vite@latest -D

 

vite.config.js 또는 vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

 

src/index.css의 내용을 전부 비우고 아래의 코드를 입력합니다.

@import 'tailwindcss';

 

src/main.jsx에서 index.css가 제대로 추가되었는지 확인합니다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

 

마지막으로 App.jsx의 내용을 전부 비운 후 아래의 코드를 입력합니다.

function App() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-500">
        Hello, Tailwind CSS 4.0!
      </h1>
    </div>
  );
}

export default App;