tailwindcss初体验

发布时间:2024年01月23日

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" />
文章来源:https://blog.csdn.net/yunbabac/article/details/135744121
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。