taiwindcss在vue-cli4的使用

原创已于 2023-07-20 15:50:08 修改 · 486 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

于 2023-07-20 15:33:22 首次发布

开发笔记专栏收录该内容

3 篇文章

订阅专栏

文章介绍了如何在VueCLI4项目中使用TailwindCSS的PostCSS7兼容版本进行配置，包括在postcss.config.js和tailwindcss.config.js中的设置，如启用jit模式、设置重要性标志、定义颜色和断点，以及关闭预设样式。

由于vue-cli4集成的是postcss7,根据tailwindcss官网，作为postcss的plugin使用，只能使用其兼容版本"npm:@tailwindcss/postcss7-compat@^2.2.17"
安装

npm i npm:@tailwindcss/postcss7-compat@^2.2.17 -D

在postcss.config.js中配置

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

tailwindcss.config.js配置

// tailwindcss v2
module.exports = {
  // 及时编译模式，p-[20px]例如这种
  mode: "jit",
  important: true, // 开启important,如!w-full
  // 配置扫描的文件
  content: [],
  purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
  theme: {
    // 颜色配置 text-primary
    colors: {
      primary: "#005eeb",
      "sub-primary": "#4c8ef1"
    }
    // 断点
    // screens: {
    //   sm: '480px',
    //   md: '768px',
    //   lg: '976px',
    //   xl: '1440px',
    // },
  },
  corePlugins: {
    // 关闭预设的样式
    preflight: false
  }
  // variants: {
  //   extend: {
  //     borderColor: ['focus-visible'],
  //     opacity: ['disabled'],
  //   }
  // }
}