如何让 Tailwind.css 与 Gatsby.js 一起工作？

Posted 2023-03-06

【中文标题】如何让 Tailwind.css 与 Gatsby.js 一起工作？

【英文标题】：How to get Tailwind.css working with Gatsby.js?

【发布时间】：2018-06-24 15:33:53

【问题描述】：

有没有人设法让Tailwind.css 与Gatsby.js 合作？

使用 Gatsby 配置 postCSS 插件有点棘手......如果有人设法让 Tailwind 与 Gatsby 一起运行，我很想知道如何！

【问题讨论】：

现在有一个 Gatsby Tailwind 的启动器github.com/taylorbryant/gatsby-starter-tailwind

太棒了！感谢分享。

【参考方案1】：

感谢this post，我成功地完成了这项工作（包括热重新加载）。

基本上我必须另外安装 postcss 和 autoprefixer：

npm install autoprefixer postcss-cli

我在 Gatsby 站点文件夹的根目录中添加了一个 postcss.config.js 并包含此内容（tailwind.js 是我的 Tailwind 配置 - 你的名称可能不同）：

const tailwindcss = require('tailwindcss');
module.exports = 
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer'),
    ],
;

然后我在package.json 中添加了一个 CSS 监视和构建脚本，并将这些脚本包含在我的默认开发和构建脚本中：

"scripts": 
  "build:css": "postcss src/layouts/index.css -o src/layouts/generated.css",
  "watch:css": "postcss src/layouts/index.css -o src/layouts/generated.css -w",
  "build": "npm run build:css && gatsby build",
  "develop": "npm run watch:css & gatsby develop",
  ...

（请注意，我的 css 的输入 (index.css) 和输出 (generated.css) 文件名和位置特定于我的项目。请随意使用您自己的约定。）

如果这对你有用，请告诉我。

【讨论】：

谢谢！我昨天看到了同一篇文章并制定了类似的解决方案（发布在下面）。

太棒了！这帮助很大:) 谢谢！

谢谢！ gatsby + tailwind 是一个很好的组合，我想在 tailwind.js 文件中添加自动重载，现在完美了

【参考方案2】：

作为 morgler 答案的补充，这是我最终得到的类似解决方案（包括 Sass 和 PurgeCSS）。

我选择了 CLI 解决方案，因为 gatsby-plugin-postcss-sass 目前在 Sass 之前运行 PostCSS（这会破坏 Tailwind），而且目前通过 Webpack 配置 Gatsby 的 PostCSS 插件有点困难。

我包含了 Sass，以便我可以将 main.sass 分解为更易于管理的部分，并添加了 PurgeCSS，以便我可以删除生产中任何未使用的 Tailwinds 类。我发现 PurgeCSS 比 PurifyCSS 更有效，这就是我选择不使用 gatsby-plugin-purify-css 的原因。

首先，创建一个具有以下结构的src/styles 文件夹（随意为您的项目自定义此文件夹并相应地调整以下设置）：

src/
  styles/
    builds/
      after-postcss/
        main.css
      after-purgecss/
        main.css
      after-sass/
        main.css
    // other subfolders for sass partials...
    main.sass

安装必要的依赖：

npm i node-sass-chokidar postcss-cli purgecss

将以下内容添加到gatsby-node.js（以禁用 Gatsby 的默认 PostCSS 插件）：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

exports.modifyWebpackConfig = ( config, stage ) => 
  switch (stage) 
    case 'develop':
      // Remove postcss from Gatsby's dev process:
      config.removeLoader(`css`)
      config.loader(`css`, 
        test: /\.css$/,
        loaders: [`style`, `css`]
      )

      break

    case 'build-css':
      // Remove postcss from Gatsby's build process:
      config.removeLoader(`css`)
      config.loader(`css`, 
        test: /after-purgecss\/main\.css/,
        loader: ExtractTextPlugin.extract([`css?minimize`])
      )

     break
  
  return config

将postcss.config.js 文件添加到项目根目录：

const tailwind = require('tailwindcss')
const cssnext = require('postcss-cssnext')

module.exports = 
  plugins: [
    // your file's name or path may differ:
    tailwind('./src/styles/tailwind.config.js'), 
    cssnext()
    // add any other postcss plugins you like...
  ]

将以下脚本添加到package.json：

"scripts": 
  "watch:sass": "node-sass-chokidar --source-map true src/styles/main.sass -o src/styles/builds/after-sass -w",
  "watch:postcss": "postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css -w",
  "watch:styles": "npm run watch:sass & npm run watch:postcss",
  "build:sass": "node-sass-chokidar src/styles/main.sass -o src/styles/builds/after-sass",
  "build:postcss": "postcss src/styles/builds/after-sass/main.css -o src/styles/builds/after-postcss/main.css",
  "build:purgecss":
    "purgecss --css src/styles/builds/after-postcss/main.css --con public/index.html src/**/*.js -o src/styles/builds/after-purgecss",
  "build:styles": "npm run build:sass && npm run build:postcss && npm run build:purgecss",
  "develop": "gatsby develop & npm run watch:styles",
  "build": "npm run build:styles && gatsby build"
  // ...
,

在开发中，运行 npm run develop 而不是 gatsby develop。只要对 main.sass 或其任何导入进行更改，watch: 脚本就会运行 Sass + PostCSS（按此顺序）。

要构建站点，请运行 npm run build 而不是 gatsby build。 build: 脚本将运行 Sass + PostCSS（没有监视任务）+ PurgeCSS（按此顺序）。

将以下内容添加到layouts/index.js 以在开发期间导入main.css 的after-postcss 版本和在生产期间导入after-purgecss 版本：

switch (process.env.NODE_ENV) 
  case `development`:
    require('../styles/builds/after-postcss/main.css')
    break
  case `production`:
    require('../styles/builds/after-purgecss/main.css')
    break

希望对某人有所帮助！如果有人知道如何将其转换为适用于 Gatsby 的 Webpack 等价物，请随时在此处发布。

【讨论】：

嘿嘿...这在开发过程中有效...但是在构建时抛出错误：⠂ Building CSSThere are errors with your webpack config: [1] module.loaders.6.loader string.base , "loader" 必须是字符串

嘘！设法让它与常规的 gatsby 设置一起工作.... hack 是安装最新版本的 postcss 和 postcss-loader：github.com/magicspon/gatsby-tailwind-hack-example

它不完全在那里...@apply 只会在主文件中工作...别担心，我正在将它与样式组件混合... Wooot

借助 Gatsby v2 和新的 gatsby-plugin-postcss，现在可以在不使用 CLI 工具的情况下将 Tailwinds 与 Gatsby 一起使用。有关更新的方法，请参阅我的评论 here。

【参考方案3】：

我最近将它添加到 Gatsby 入门默认设置之上，并编写了详细的分步指南。

https://www.michaelfasani.com/2020/installing-tailwind-css-on-top-of-the-gatsby-starter-default/

【参考方案4】：

这是我的设置，与 Gatsby 完美配合：

tailwind.config.js

    module.exports = 
      mode: "jit",
      purge: [
        "./src/pages/**/*.js,ts,jsx,tsx",
        "./src/components/**/*.js,ts,jsx,tsx",
      ],

package.json

"scripts": 
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "tw:build": "tailwindcss build ./src/styles/global.css -o ./public/styles/global.css",
    "tw:prod": "cross-env NODE_ENV=production postcss build ./src/styles/global.css -o ./public/styles/global.css",
    "tw:watch": "onchange \"tailwind.config.js\" \"src/**/*.css\" -- npm run tw:build"
  ,

您还可以使用 cssnano，它是一个非常棒的扩展，用于清除顺风 css

postcss.config.js

const cssnano = require("cssnano");

module.exports = 
  plugins: [
    require("tailwindcss"),
    cssnano(
      preset: "default",
    ),
    require("autoprefixer"),
  ],
;

最新 Tailwind 版本所需的 devDependencies 如下：

package.json devDependencies

"devDependencies": 
    "autoprefixer": "^10.3.6",
    "gatsby-plugin-postcss": "^4.14.0",
    "postcss": "^8.3.9",
    "postcss-cli": "^9.0.1",
    "tailwindcss": "^2.2.17"
  

还要确保将这些包含在 global.css 文件的顶部：

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