vite配置tailwindcss

这里以vue3为例，其他的框架只要是vite配置的也可参考这个

项目创建

Vite 需要 Node.js 版本 18+ 或 20+

js 复制代码

npm create vite@latest my-vue-app

创建完执行命令运行项目

bash 复制代码

 cd my-vue-app
 npm install
 npm run dev

项目正常运行即可

安装和初始化`tailwindcss`相关插件

安装相关插件

js 复制代码

npm install -D tailwindcss postcss autoprefixer

初始化命令

bash 复制代码

npx tailwindcss init -p

初始化完毕后找到tailwind.config.js，内容如下：

js 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

引入配置

方式一：在App.vue进行引入

js 复制代码

<script setup>
</script>

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

方式二：也可以单独建一个css文件,内容就是下面代码的style标签内的代码，然后在main.js里面导入这个css文件，例如在src/style.css里面加的下面三行代码，则在main.js里面新增import './style.css'即可，这里个人写习惯了，直接在App.vue里面写了

上面配置完之后，启动项目npm run dev后就可以在页面使用tailwindcss的类样式了

vscode提示插件Tailwind CSS IntelliSense

下面贴一份个人使用的tailwind.config.js的默认配置

js 复制代码

module.exports = {
  content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
      extend: {
          colors: { // 背景颜色和文本颜色  bg-blue text-white 等
            blue: 'blue',
            white: 'white',
            pink:'pink'
          },
          width: (() => { // 元素宽度 w-0(0rem) - w-1000(rem)  宽高范围跟着UI图走的
            const widths = {};
            for (let i = 0; i <= 750; i++) {
              widths[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值
            }
            return widths;
          })(),
          height: (() => { // 元素高度 h-0(0rem) - h-1448(1448rem)   宽高范围跟着UI图走的
            const height = {};
            for (let i = 0; i <= 1448; i++) {
              height[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值
            }
            return height;
          })(),
          fontSize: (() => { // 字体大小 text-0(0rem) - text-100(100rem) 
            const fontSize = {};
            for (let i = 0; i <= 1000; i++) {
              fontSize[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值
            }
            return fontSize;
          })(),
          lineHeight: (() => { // 行高值 leading-5
            const lineHeight = {};
            for (let i = 0; i <= 300; i++) {
              lineHeight[`${i}`] = `${i}rem`; // 直接使用像素值作为键和值
            }
            return lineHeight;
          })(),
          spacing: (() => { // 上下左右间距 left/right/bottom/top left-60
            const spacing = {};
            for (let i = 0; i <= 1448; i++) {
              spacing[`${i}`] = `${i}rem`;
            }
            return spacing;
          })(),
          margin: (() => { // 上下左右间距
            const margin = {};
            for (let i = 0; i <= 750; i++) {
              margin[`${i}`] = `${i}rem`;
            }
            return margin;
          })(),
          zIndex: (() => { // 层级
            const zIndex = {};
            for (let i = 0; i <= 100; i++) {
              zIndex[`${i}`] = `${i}`;
            }
            return zIndex;
          })()
      },
  },
  plugins: [],
}

vite配置tailwindcss

项目创建

安装和初始化tailwindcss相关插件

安装相关插件

初始化命令

引入配置

安装和初始化`tailwindcss`相关插件