Taiwlind CSS：样式在生产中不加载，在开发中工作。将 Next.js 与 MDX 一起使用

Posted 2023-03-07

【中文标题】Taiwlind CSS：样式在生产中不加载，在开发中工作。将 Next.js 与 MDX 一起使用

【英文标题】：Taiwlind CSS: Styles don't load in production, works in dev. Using Next.js with MDX

【发布时间】：2021-02-13 15:53:04

【问题描述】：

我可能是从网上的一堆博客文章中拼凑出来的。有些博客使用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,
                ,
            ,
        ],
    ],

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

【参考方案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,