vue-tabs-组件自定义类

Question

我正在尝试将Vue-tabs-component与Tailwindcss一起使用。

有问题的组件是https://github.com/spatie/vue-tabs-component，我已经实现了它，但是当使用带有Tailwind的类时，样式不起作用，组件似乎绑定到编译的类。

这就是我所拥有的：

<template>
  <section class="flex h-screen w-screen uppercase shadow leading-loose">
    <section id="large-header" class="relative w-full overflow-hidden bg-cover bg-center gradient-background">
      <canvas id="demo-canvas"></canvas>

      <section class="flex flex-wrap w-full max-w-xs p-4 absolute m-0 bg-white shadow content">
        <tabs class="flex justify-center inline-flex border-b w-full pt-2">
          <tab name="signIn" class="uppercase text-grey-darker text-lg border-b border-transparent hover:border-grey-darker pb-4" style="outline:none">
            <SignIn />
          </tab>
          <span class="pr-8"></span>
          <tab name="signUp" class="uppercase text-grey-darker text-lg border-b border-transparent hover:border-grey-darker pb-4" style="outline:none">
            <SignUp />
          </tab>
        </tabs>

        <section v-if="authUser">
          <h2 class="text-5xl">Signed in as {{ authUser.email }}</h2>
          <button @click='signOut'></button>
        </section>
      </section>
    </section>
  </section>
</template>

<script>
import SignIn from '@/components/Forms/SignIn'
import SignUp from '@/components/Forms/SignUp'
import {Tabs, Tab} from 'vue-tabs-component';

export default {
  components: {
    SignIn,
    SignUp,
    Tabs,
    Tab
  },
  data: function () {
    return {
      authUser: null
    }
  },
  methods: {
    signOut () {
      firebase.auth().signOut()
    },
    created () {
      firebase.auth().onAuthStateChanged(user => { this.authUser = user })
    }
  }
}
</script>


<style scoped>
.gradient-background {
  background: #0f0c29;
  background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
  background: linear-gradient(to right, #24243e, #302b63, #0f0c29);

  /* background: #093028;
  background: -webkit-linear-gradient(to right, #237A57, #093028);
  background: linear-gradient(to right, #237A57, #093028); */
}

.content {
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  color: #F9F1E9;
  top: 50%;
  left: 50%;
}
</style>

下面是我想要的最终结果

​

​

当我添加选项卡(上面的代码)时，我会得到这样的结果

​

​

任何帮助都是非常感谢的。

Answer 1

将顺风安装到项目：

npm install tailwindcss --save-dev

在项目根目录下创建一个tailwind.js文件：

./node_modules/.bin/tailwind init tailwind.js

创建包含以下内容的main.css：

@tailwind preflight;
@tailwind components;
@tailwind utilities;

修改package.json中的脚本以构建main.css：

"scripts": {
  "tailwind:build": "./node_modules/.bin/tailwind build ./input_path/main.css -c ./tailwind.js -o ./outputh_path/styles.css",
  "serve": "npm run tailwind:build && vue-cli-service serve",
  "build": "npm run tailwind:build && vue-cli-service build",
  "lint": "vue-cli-service lint"
}

将链接放在public/index.html中：

<link rel="stylesheet" href="<%= webpackConfig.output.publicPath %>output_path/styles.css" />