我使用 Tailwind 制作的 CSS 不适用于使用 gridsome 构建 netlify答案

【问题标题】：My CSS made with Tailwind doesn't work on build with gridsome for netlify我使用 Tailwind 制作的 CSS 不适用于使用 gridsome 构建 netlify
【发布时间】：2023-03-26 19:25:02
【问题描述】：

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

【问题讨论】：

也许缺少顺风要求？ const tailwind = require('tailwindcss')

标签： build netlify tailwind-css gridsome

【解决方案1】：

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

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

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

【讨论】：

【解决方案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");
      }
    };

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

@tailwind base;

@tailwind components;

@tailwind utilities;

在main.js 中导入global.css

import './styles/global.css'

【讨论】：