Tailwind CSS：样式不会在生产中加载，在开发中有效。将 Next.js 与 MDX 结合使用

Question

我可能是从网上的一堆博客文章中拼凑出来的。有些博客使用 autoprefixer，有些使用 postcss-preset-env，这都是混乱。

我已将 tailwindcss 安装为开发依赖项并在 pages/_app.tsx 中正确导入了样式。这是我的相关文件：

package.json

"dependencies": {
    "@mapbox/rehype-prism": "^0.5.0",
    "@mdx-js/react": "^1.6.19",
    "@types/nprogress": "^0.2.0",
    "fast-glob": "^3.2.4",
    "next": "10.0.0",
    "nprogress": "^0.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "tinytime": "^0.2.6"
},
"devDependencies": {
    "@fullhuman/postcss-purgecss": "^3.0.0",
    "@mdx-js/loader": "^1.6.19",
    "@next/bundle-analyzer": "^10.0.0",
    "@types/mdx-js__react": "^1.5.3",
    "@types/node": "^14.14.6",
    "@types/react": "^16.9.55",
    "@types/react-dom": "^16.9.9",
    "@types/webpack-env": "^1.15.3",
    "cross-env": "^7.0.2",
    "feed": "^4.2.1",
    "file-loader": "^6.2.0",
    "postcss-flexbugs-fixes": "^4.2.1",
    "postcss-preset-env": "^6.7.0",
    "rimraf": "^3.0.2",
    "simple-functional-loader": "^1.2.1",
    "tailwindcss": "^1.9.6",
    "typescript": "4.0.5"
},

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    purge: {
        mode: 'all',
        content: ['./src/**/*.{js,ts,jsx,tsx}', './next.config.js'],
        options: {
            extractors: [
                {
                    extensions: ['mdx'],
                    extractor: (content) => {
                        content = mdx.sync(content)

                        // Capture as liberally as possible, including things like `h-(screen-1.5)`
                        const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

                        // Capture classes within other delimiters like .block(class="w-1/2") in Pug
                        const innerMatches =
                            content.match(/[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g) || []

                        return broadMatches.concat(innerMatches)
                    },
                },
            ],
        },
    },
    theme: {
        extend: {
            colors: {
                'accent-1': '#333',
            },
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {},
    plugins: [
        function ({ addBase, addComponents, theme }) {
            addBase([
                {
                    '@font-face': {
                        fontFamily: 'Inter var',
                        fontWeight: '100 900',
                        fontStyle: 'normal',
                        fontNamedInstance: 'Regular',
                        fontDisplay: 'swap',
                        src: 'url("/fonts/Inter-roman.var-latin.woff2?3.13") format("woff2")',
                    },
                },
                {
                    '@font-face': {
                        fontFamily: 'Inter var',
                        fontWeight: '100 900',
                        fontStyle: 'italic',
                        fontNamedInstance: 'Italic',
                        fontDisplay: 'swap',
                        src: 'url("/fonts/Inter-italic.var-latin.woff2?3.13") format("woff2")',
                    },
                },
            ])
        },
    ],
}

postcss.config.js

module.exports = {
    plugins: [
        'tailwindcss',
        'postcss-flexbugs-fixes',
        process.env.NODE_ENV === 'production'
            ? [
                    '@fullhuman/postcss-purgecss',
                    {
                        content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
                        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
                    },
              ]
            : undefined,
        [
            'postcss-preset-env',
            {
                autoprefixer: {
                    flexbox: 'no-2009',
                },
                stage: 3,
                features: {
                    'custom-properties': false,
                },
            },
        ],
    ],
}

我确定我做错了什么但不知道是什么？

Answer 1

找到解决方案。

我从 postcss.config.js 中删除了下面的全部内容：

process.env.NODE_ENV === 'production'
            ? [
                    '@fullhuman/postcss-purgecss',
                    {
                        content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
                        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
                    },
              ]
            : undefined,

Tailwind CSS：样式不会在生产中加载，在开发中有效。将 Next.js 与 MDX 结合使用

Taiwlind CSS: Styles don't load in production, works in dev. Using Next.js with MDX

javascript

css

next.js

tailwind-css

mdxjs

package.json

tailwind.config.js

postcss.config.js