2

当我构建（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,
      },
    },
  },
}
4

2 回答 2

3

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

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

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

于 2019-09-21T21:02:03.127 回答
0

您可以通过以下步骤将 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'

于 2019-09-19T09:14:54.150 回答