小编kur*_*ura的帖子

我如何在 Vue 上使用 Sass 来使用 Tailwind

我想在 vue js 上使用 tailwind 和 sass,我正在关注 tailwind 文档,但仍然遇到此错误

这是我的依赖,postcss 是最新的

"dependencies": {
    "autoprefixer": "^10.1.0",
    "core-js": "^3.6.5",
    "postcss": "^8.2.1",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^14.0.0",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
    "precss": "^4.0.0",
    "tailwindcss": "^2.0.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
Run Code Online (Sandbox Code Playgroud)

这是我的postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}
Run Code Online (Sandbox Code Playgroud)

有什么解决办法吗?我如何在 vue js 上使用 tailwind 和 sass 预处理器?谢谢大家。

错误:PostCSS 插件 tailwindcss 需要 PostCSS 8

来自 postcss 的错误

javascript css sass vue.js tailwind-css

3
推荐指数
1
解决办法
1149
查看次数

Vue js 上带有 props 的反应式 Tailwind 类

我尝试过在 vue js 上使用可重用的组件,例如传递 props 类名。就我而言,我使用的是 tailwind css。如何使用 props 传递类名?

这是我的代码

<template lang="pug">
  router-link.button-filled(
      :to="routeName"
      :title="title"
      :class="customClass"
    )
    | {{ title }}
</template>

<script>
export default {
  props: {
    routeName: { default: "/", type: String },
    title: { default: "Button", type: String },
    size: { default: "md", type: String },
    backgroundColor: { default: "red-500", type: String },
    borderColor: { default: "red-500", type: String }
  },
  computed: {
    customClass() {
      return [
        "bg-" + this.backgroundColor,
        "border-" + this.borderColor
      ];
    }
  } …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js tailwind-css

3
推荐指数
1
解决办法
5331
查看次数

标签 统计

javascript ×2

tailwind-css ×2

vue.js ×2

css ×1

sass ×1