build - 我使用 Tailwind 制作的 CSS 不适用于使用 gridsome 构建 netlify

Question

当我构建（netflify 构建）我的 Gridsome 个人网站时，tailwind CSS 类不起作用，网站看起来就像没有 CSS。

我已经尝试在没有 git 的情况下构建，重新安装 tailwind ......

如果这是问题，我会显示我的网格配置：

const tailwind = require('tailwindcss');
const purgecss = require('@fullhuman/postcss-purgecss');

const postcssPlugins = [
  tailwind(),
]

if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss());

module.exports = {
  siteName: 'Zolder | Works',
  plugins: [],
  css: {
    loaderOptions: {
      postcss: {
        plugins: postcssPlugins,
      },
    },
  },
}

Answer 1

我也有这个问题。我使用了 Gridsome 的 Tailwind 插件，它在本地工作，但是在部署到 Netlify 时，没有添加 Tailwind css。

引用这个起始文件：https ://github.com/drehimself/gridsome-portfolio-starter/blob/master/src/layouts/Default.vue

我将main.css所有 Tailwind 导入文件添加到默认布局模板的末尾，这对我有用。

Answer 2

您可以通过以下步骤将 Tailwind 添加到您的 Gridsome 项目中：

• 编辑gridsome.config.js

    module.exports = {
      siteName: "Zolder",
      plugins: [],
      chainWebpack: config => {
        config.module
          .rule("postcss-loader")
          .test(/.css$/)
          .use(["tailwindcss", "autoprefixer"])
          .loader("postcss-loader");
      }
    };

• 在中创建一个global.css文件./src/styles

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

• 进口global.css_main.js

  import './styles/global.css'