TailwindCSS、Webpack 和 Sass：在 CSS 文件中使用时找不到 class，但在内联 HTML 时工作正常

Question

我有模块化 CSS（使用 Sass），当我将 Tailwind 的 @apply 与一些类一起使用时，我的 webpack 抛出错误。其中一些有效，有些无效，我不明白为什么。它在 HTML 中内联工作，但在 CSS 文件中不工作。

gallery.scss

.c-gallery-thumbnails {
  @apply space-x-3;
}

base.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

import "gallery"

webpack

module: {
            rules: [
                {
                    test: /\.[ps]?css$/,
                    use: ExtractTextPlugin.extract({
                        use: [
                            'css-loader',
                            'resolve-url-loader',
                            {
                                loader: 'postcss-loader',
                                options: {
                                    ident: 'postcss',
                                    plugins: [
                                        require('postcss-import'),
                                        require('tailwindcss'),
                                        require('autoprefixer'),
                                    ],
                                },
                            },
                            'sass-loader',
                        ],
                    }),
                },
...

错误：

@apply cannot be used with .space-x-3 because .space-x-3 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .space-x-3 exists, make sure that any @import statements are being properly processed before Tailwind CSS see s your CSS, as @apply can only be used for classes in the same CSS tree.

Answer 1

请尝试导入 .css 文件，其中 space-x-3 css 规则在 gallery.scss.

中定义

Answer 2

读一读：https://tailwindcss.com/docs/using-with-preprocessors/

For the most cohesive development experience, it's recommended that you use PostCSS exclusively.

TailwindCSS、Webpack 和 Sass：在 CSS 文件中使用时找不到 class，但在内联 HTML 时工作正常

TailwindCSS, Webpack and Sass: class cannot be found while using in CSS file but working fine when inline HTML

css

sass

webpack

tailwind-css