创建Vue3项目

 创建vue3+vite+ts+pinia+router

npm create vue@latest

添加Tailwindcss支持

 安装 Tailwind 以及其它依赖项并生成 tailwind.config.js 和 postcss.config.js 文件

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

配置 Tailwind

  // 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: [],
  }

在CSS 中引入 Tailwind,最后,确保您的 CSS 文件被导入到您的 ./src/main.js 文件中


/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

已经完成了所有步骤

解决报错和无提示问题

 安装vscode插件:PostCSS Language Support

无智能提示安装:Tailwind CSS IntelliSense

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐