tailwindcss/vue：生成的 css 文件不包含 <style> 部分的自定义类

Posted 2023-03-06

【中文标题】tailwindcss/vue：生成的 css 文件不包含 <style> 部分的自定义类

【英文标题】：tailwindcss/vue: generated css file doesn't include custom classes from <style> section

【发布时间】：2021-07-31 13:54:01

【问题描述】：

我正在使用带有 mode:jit 和 vue 的 tailwindcss，我使用这个命令来创建我的样式

"tailwind": "NODE_ENV=production postcss ./src/assets/index.css -o ./dist/index.css"

<template>
  <div class="hello">Some text</div>
</template>

<style scoped>
.hello
  @apply text-9xl text-pink-600

</style>

这是结果

.text-9xl 
  font-size: 8rem;
  line-height: 1

.text-pink-900 
  --tw-text-opacity: 1;
  color: rgba(131, 24, 67, var(--tw-text-opacity))

但是我怎样才能得到这样的结果呢？

.hello     
    font-size: 8rem;
    line-height: 1;    
    --tw-text-opacity: 1;
    color: rgba(131, 24, 67, var(--tw-text-opacity))

更新： 如果我构建整个项目，那么“.hello”将放在我捆绑的 js 中

所以应该是可以的，但是我不知道如何生成这样一个单独的css文件..

更新2

我创建了一个小仓库，也许这有助于解决我的问题。 https://github.com/gregorvoinov/tailwind

【参考方案1】：

在我做 ??时在 Vue 3 中工作

tailwind.config.js

ringColor: (theme) => (
      DEFAULT: theme('colors.blue.500', '#2156C9'),
      ...theme('colors'),
      focus_border: '#2156C9',
    ),

tailwind.css

focus:ring-focus_border