tailwindcss初体验

tailwindcss初体验

css量子化，需要记住很多类名，的确能提高效率，但是html中类名太多，有点影响逻辑，个人兴趣不大

----------------------------------------------------------2024-1-26修改------------------------------------------------------------

vue vite安装参考: https://www.tailwindcss.cn/docs/guides/vite#vue

安装

npm install -D tailwindcss

初始化配置文件

npx tailwindcss init -p

修改

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

postcss配置文件

新建 postcss.config.js文件

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

构建css

在任意位置新建style.css

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

main.js文件引入

import './assets/css/style.css'

启动项目并使用