Vue3，Vite3，TS，Naive-UI整合TailwindCSS

在Vue 3, Vite 3, TS, Naive-UI项目中整合Tailwind CSS，你需要按照以下步骤操作：

初始化项目：




npm create vite@latest my-app --template vue-ts
cd my-app

安装Tailwind CSS：




npm install -D tailwindcss postcss autoprefixer

在项目根目录创建tailwind.config.js和postcss.config.js文件：

tailwind.config.js:




module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js:




module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

在src/styles/index.css中引入Tailwind CSS：




@tailwind base;
@tailwind components;
@tailwind utilities;

在vite.config.js中配置Tailwind CSS：




import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/index.css";`,
      },
    },
  },
});

安装Naive-UI：




npm install naive-ui

在main.ts中引入Naive-UI和Tailwind CSS：




import { createApp } from 'vue';
import App from './App.vue';
import { NConfigProvider } from 'naive-ui';
import 'naive-ui/dist/index.css';
import './styles/index.css'; // Tailwind CSS entry point
 
const app = createApp(App);
 
app.use(NConfigProvider);
 
app.mount('#app');

在index.html中添加Tailwind CSS purge layer：




<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ... -->
</head>
<body>
  <div id="app"></div>
  <!-- Tailwind CSS purge layer -->
  <div class="tailwind-test"></div>
  <!-- ... -->
</body>
</html>

在src/styles/index.css中添加Tailwind directives：




@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer utilities {
  .tailwind-test {
    @apply your-utility-class;
  }
}

确保替换your-utility-class为你希望应用的Tailwind CSS实用工具类。

以上步骤完成后，运行npm run dev启动项目，Tailwind CSS和Naive-UI应该已经整合到你的Vue 3, Vite 3, TS, Naive-UI项目中。

Vue3，Vite3，TS，Naive-UI整合TailwindCSS

评论已关闭

推荐阅读