Question

我试图在Tailwindcss中使用Vue-tabs-component。

有问题的组件是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>

这就是我想要的最终结果

当我添加标签（上面的代码）时，我得到了这个

image #2

感谢任何帮助。

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" />

vue-tabs-component自定义类

1 个答案: