Vue3 使用 TailwindCSS 教程

1.安装

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2.配置

创建配置文件

npx tailwindcss init -p

/tailwind.config.js

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

3.将加载 Tailwind 的指令添加到你的 CSS 文件中

src/styles/tailwind.css

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

@layer base {
  /* h1 {
     @apply text-2xl;
  } */
}

@layer components {
  /* .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  } */
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

5.src/main.ts 中引入 tailwindcss

import "./styles/tailwind.css";

6.插件配置

src/styles/tailwindPlugin.ts

import plugin from 'tailwindcss/plugin';

/* 自定义 tailwind 类名 */
export default plugin(({ addComponents, theme }) => {
  addComponents({
    /* 绝对定位 + 满父容器宽高 */
    '.fullAbsolute': {
      position: 'absolute',
      width: '100%',
      height: '100%',
      inset: '0', // 搜狗浏览器不支持
      top: '0',
      left: '0',
      right: '0',
      bottom: '0',
    },
  });
});

7.按需配置主题和扩展

/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
  // darkMode: ['class', '[data-mode="dark"]'], // 暗色模式
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    fontSize: {
      base: 16,
    },
    extend: {
      colorGrey: 'rgba(220, 220, 220, 1)',
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  plugins: [tailwindLayers],
}

使用

<div class="border-colorGrey">

8.px转rem

除了行内样式其他px会自动转rem yarn add postcss-pxtorem /postcss.config.js

export default {
  plugins: {
    'tailwindcss/nesting': {},
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    ...(import.meta.PROD ? { cssnano: {} } : {}),
    'postcss-pxtorem': {
      rootValue: 16,
      replace: true, //替换包含rems的规则，而不添加后备
      minPixelValue: 1, //设置要替换的最小像素值
      selectorBlackList: [/^\.?__exclude__rem__/], // 使用正则表达式排除以 __exclude__vw__ 开头的类名
      propList: ['*'], //可以从px转换为rem的属性，匹配正则
      unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字
      exclude: /node_modules/i // 要忽略并保留为 px 的文件路径
    },
  },
};

9.template使用

不支持添加背景图, 要在style写

<template>
<div class="grid gap-2 grid-cols-3 grid-rows-2">
    <!--  头部  -->
    <Header class="col-span-3" />
    <!--  侧边栏  -->
    <Sidebar class="row-span-2" />
</div>
</template>

10.style使用

如果是less 直接写 , 不能加lang="less"

<style lang="scss" scoped>
  .number {
    @apply font-bold;
  }
</style>