前端项目支持tailwindcss写样式

  • 安装
shell 复制代码
npm install -D tailwindcss
npx tailwindcss init
  • 配置 tailwind.config.js
shell 复制代码
//根据个人需求填写,比如vue简单配置
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  corePlugins: {
    preflight: false
  },
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        bg_color: "var(--el-bg-color)",
        primary: "var(--el-color-primary)",
        primary_light_9: "var(--el-color-primary-light-9)",
        text_color_primary: "var(--el-text-color-primary)",
        text_color_regular: "var(--el-text-color-regular)",
        text_color_disabled: "var(--el-text-color-disabled)"
      }
    }
  }
};
  • Tailwind 的指令添加到你的 CSS 文件中,可以新建css文件并贴入以下代码,并且在main文件种引入该css
shell 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;
  • postcss.config.js 调整
shell 复制代码
export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {}
	}
};

现在就可以在你的项目种直接使用tailwindcss,附上官网链接:tailwindcss

相关推荐
JarvanMo4 分钟前
用“工厂传送带”的方式理解 Dart/Flutter 事件循环
前端
快乐非自愿13 分钟前
商品中心—库存分桶高并发的优化文档
java·前端·spring
灰海17 分钟前
原型与原型链到底是什么?
开发语言·前端·javascript·es6·原型模式·原生js
玲小珑18 分钟前
Next.js 教程系列(十四)NextAuth.js 身份认证与授权
前端·next.js
山河木马32 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina33 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者39 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享1 小时前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享1 小时前
如何利用取色器实现跨平台色彩一致性
前端
灰海1 小时前
封装WebSocket
前端·网络·websocket·网络协议·vue