Vue3、Tailwind 和 Postcss 配置，嵌套不起作用

Question

我创建了一个新的 Vue3 应用程序，使用 TailwindCSS 进行主题设置，但是无法使嵌套插件工作。 当我们的 watch 命令使用 tailwind 时，对于 Tailwind 如何知道使用 PostCSS 配置也有点困惑

运行 tailwind 并生成我们的输出 css 文件的脚本：

"tailwind": "npx tailwindcss -i./src/assets/input.css -o./public/moonstyles.css --watch",

包.json

"dependencies": {
  "@headlessui/vue": "^1.7.5",
  "@heroicons/vue": "^2.0.13",
  "pinia": "^2.0.28",
  "ramda": "^0.28.0",
  "vue": "^3.2.45",
  "vue-router": "^4.1.6"
},
"devDependencies": {
  "@rushstack/eslint-patch": "^1.1.4",
  "@vitejs/plugin-vue": "^4.0.0",
  "@vitejs/plugin-vue-jsx": "^3.0.0",
  "@vue/eslint-config-prettier": "^7.0.0",
  "autoprefixer": "^10.4.13",
  "cypress": "^12.0.2",
  "eslint": "^8.22.0",
  "eslint-plugin-cypress": "^2.12.1",
  "eslint-plugin-vue": "^9.3.0",
  "jest": "^29.3.1",
  "postcss": "^8.4.20",
  "postcss-import": "^15.1.0",
  "postcss-nesting": "^10.2.0",
  "prettier": "^2.7.1",
  "start-server-and-test": "^1.15.2",
  "tailwindcss": "^3.2.4",
  "vite": "^4.0.0",
  "vue-cli-plugin-tailwind": "~3.0.0"
},

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue}"],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    extend: {
      colors: {
        brightRed: 'hsl(12, 88%, 59%)',
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  prefix: 'tw-',
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {
      config: './tailwind.config.js'
    },
    autoprefixer: {},
  },
}

主输入文件

@import './tailwind.css';
@import './base.css';
@import './main.css';

@import './test.css';

最后导入到主 tailwind.css 文件中的 CSS 文件

.welcome {
  .leon {
    color: blue important!;
  }
  em {
    color: red important;
  }
}

h1 {
  color: green;
}
/* .leon {
  color: blue !important;
}

em {
  color: red;
} */

标记

<div>
  <h1 class="text-2xl font-bold underline">
    Hello world!
  </h1>
  <h2 class="welcome text-4xl">
    <div class="leon bg-brightRed">Leon</div>
    <em>!!!</em>
  </h2>
  <button type="button">
    Options
  </button>
</div>

正如您在下面看到的，Leon 不是蓝色的，而且，.! 不是红色的，那些嵌套样式也没有出现。

Answer 1

下面是我的 tailwind.css 文件的格式，它可以成功运行。 您是否尝试过使用类似的格式将“main tailwind.css”文件中的代码封装到“@layer components”部分？

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base { ... }    
@layer components 
{
  body {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  }
  .v-select{
    @apply w-full border border-color-dark-gray rounded-md px-3 py-1 shadow-sm
    focus:border-color-orange focus:ring-color-orange;
  }
  strong{
    @apply text-color-red
  
  }
}