tailwindcss初体验

tailwindcss初体验

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

安装

// 安装
npm install -D tailwindcss
// 初始化配置文件
npx tailwindcss init

配置文件修改

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 我使用的是vue,添加.vue
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加Tailwind 的指令添加到你的 CSS 文件中

新建assets/css/style.css

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

构建

将用到的类编译成css文件

npx tailwindcss -i ./src/assets/css/style.css -o ./public/css/style.css --watch

html文件引用编译好的css

    <link href="/public/css/style.css" rel="stylesheet" />