vue中tailwindcss插件的引入及使用

插件介绍：通过组合多个类名快速构建界面样式，无需编写自定义的CSS。‌如：

class="mx-[10px]" 等价于 margin-left: 10px; margin-right: 10px;

class="text-[#fff] bg-[#88c2c6]" 等价于 color: #fff; background-color: #88c2c6;

class="w-[100px] h-[50px] rounded-[5px]" 等价于 width: 100px; height: 50px; border-radius: 5px;
一、安装

javascript 复制代码

npm i tailwindcss postcss autoprefixer --save
npx tailwindcss init -p

执行结果：（在根目录下创建了tailwind.config.js、postcss.config.js两个配置文件）

javascript 复制代码

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

注：若执行npx tailwindcss init -p命令报错（npm ERR! could not determine executable to run），原因可能是node版本过低和Tailwind CSS 版本不兼容。可卸载依赖重新安装稳定版本3.4.17，即：

javascript 复制代码

npm i tailwindcss@3.4.17 postcss autoprefixer --save

二、tailwind.config.js配置文件

这里只列了些常用的配置，更多可参考官方文档：https://www.tailwindcss.cn/docs/configuration

javascript 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts.jsx,tsx}'], // 内容扫描路径
  theme: { // 自定义主题
    extend: {
      colors: { // ‌自定义颜色
        'custom-gray': '#eee',
        'custom-blue': 'skyblue',
        'dark': {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827',
        },
      },
      lineHeight: {
        'custom-height': '30px'
      },
      fontFamily: { // 自定义字体
        sans: ['Helvetica', 'Arial', 'sans-serif'],
        custom: ['cursive'],
      },
      spacing: { // ‌自定义间距
        '8': '8px',
        '12': '12px',
        '16': '16px',
        '20': '20px'
      },
      screens: { // 自定义屏幕断点
        'xs': '768px',
        'md': '992px',
        'lg': '1200px',
        'xl': '1920px',
      }
    },
  },
  plugins: [], // 插件
  variants: { // 通过 variants变体 选项控制在哪些状态（如 hover、focus、active）下生成工具类。
    extend: {}
  },
  darkMode: 'class', // 配置暗黑模式的切换机制，可选值：class、media（默认情况下，Tailwind 使用这种方式）、false
  /*
  ①、class：通过在 HTML 根元素（通常是 <html> 或 <body>）上添加或移除 dark 类来切换深色模式。
  ②、media：当用户的系统设置为深色模式时，Tailwind 会自动应用 dark: 前缀的样式，无需手动干预，完全依赖于用户的系统设置。
  它会根据用户的系统偏好（通过 CSS 媒体查询 prefers-color-scheme: dark）自动切换深色模式。
  （如：操作浏览器-设置-外观-模式-深色，即可触发@media (prefers-color-scheme: dark) {}）
  ③、false：禁用深色模式功能。
  */
}

三、引入（在全局.css文件中加入下面几行）

javascript 复制代码

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

四、页面使用

javascript 复制代码

<template>
    <div>
        <p class="mx-[10px] my-[10px] text-center px-[10px] py-[10px] text-[#fff] text-[15px] bg-[#88c2c6] w-[100px] rounded-[5px]">内容①</p>
        /* 等价于：
        margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;
        text-align: center; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;
        color: #fff; font-size: 15px; background-color: #88c2c6; width: 100px; border-radius: 5px;
        */
        <div class="h-[50px] font-bold underline capitalize italic leading-custom-height p-8 m-12 bg-custom-gray text-custom-blue font-custom">abc内容②</div>
        /* 等价于：
        height: 50px; font-weight: 700;
        text-decoration-line: underline; // 下划线
        text-transform: capitalize; // 首字母大写
        font-style: italic; // 斜体
        line-height: 30px; // 在配置文件tailwind.config.js中自定义了lineHeight样式，使用时以leading-开头
        padding: 8px; margin: 12px; // 在配置文件tailwind.config.js中自定义了spacing
        background-color: #eee; color: skyblue; // 在配置文件tailwind.config.js中自定义了颜色custom-gray、custom-blue
        font-family: cursive; // 在配置文件tailwind.config.js中自定义了fontFamily，使用如：font-custom或font-sans
        */
        <p class="w-[100px] xs:w-[300px] md:w-[500px] lg:w-96 bg-[#eee] hover:text-[#f00]">内容③</p>
        /* 等价于：（媒体查询）
        width: 100px;
        @media (min-width: 768px) { width: 300px; }
        @media (min-width: 992px) { width: 500px; }
        @media (min-width: 1200px) { width: 24rem; }
        p:hover { color: #f00; }

        注：Tailwind 的默认间距系统是基于 0.25rem（即 4px）作为一个基础单位。
        w-0 对应 0px
        w-1 对应 0.25rem (4px)
        w-2 对应 0.5rem (8px)
        w-3 对应 0.75rem (12px)
        w-4 对应 1rem (16px)
        ...
        w-96 对应 24rem (384px)
        */
        <div class="bg-white text-black dark:bg-black dark:text-white">这个元素在浅色模式下是白色背景黑色文字，在深色模式下是黑色背景白色文字。</div>
        <div class="bg-white text-black dark:bg-dark-600 dark:text-dark-50">同上</div>
        <a @click="onChange" style="cursor: pointer;" class="text-dark-500">切换主题</a>
    </div>
</template>

<script setup>
    function onChange () {
        document.documentElement.classList.toggle('dark');
        // classList.toggle()判断元素若有该类名则移除，若没有则添加。
    }
</script>