保姆级tailwindcss的配置

144 阅读1分钟

我本想介绍一下tailwindcss的优点的,后来觉得想用的人不需要推荐,不想用的推荐也无效。 想了解的可以访问tailwindcss.com/ 直接说配置方法。

下载依赖包

pnpm add tailwindcss postcss autoprefixer

创建配置文件

npx tailwindcss init -p

更改配置文件

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}", // 此处content需要配置监听文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在全局css中(可以新建)引入tailwindcss配置

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
 import 'tailwind.css'

重新启动项目,测试是否配置成功