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

Posted 2023-03-07

【中文标题】我使用 Tailwind 制作的 CSS 不适用于使用 gridsome 构建 netlify

【英文标题】：My CSS made with Tailwind doesn't work on build with gridsome for netlify

【发布时间】：2020-01-16 02:35:29

【问题描述】：

当我构建（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')

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