vite 6 + react 19 에 tailwind.css 3.4 + antd 5.24 적용하기

★  1
npm create vite@latest . -- --template react

★ 2
npm install -D tailwindcss@3 postcss autoprefixer

★ 3 - postcss.config.cjs
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

★ 4
npm i antd

★ 5
npx tailwind init <--- 3.x에서 필요

★ 6 - index.css
@layer tailwind-base, antd;
@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

★ 7 - tailwind.config.js
export default { 
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

★ 8 - vite.config.js ,  절대경로
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
  ],
  resolve: {
    alias: [
      { find: "@", replacement: "/src" },
      { find: "@components", replacement: "/src/components" },
      { find: "@headers", replacement: "/src/components/headers" },
      { find: "@pages", replacement: "/src/pages" },


      { find: '@', replacement: resolve(__dirname, 'src') },
      { find: '@pages', replacement: resolve(__dirname, 'src/pages') },
     
    ],
  },
  server: {
    port: 3000
  },
  preview: {
    port: 8080
  }
})

★ 9 - index.css
@layer tailwind-base, antd;
@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;

★ 10 - App.css -삭제

 

vite 6 + react 19 에 tailwind.css 3.4 + antd 5.24