如何讓 Tailwind.css 與 Gatsby.js 一起工作？

Question

有沒有人設法讓Tailwind.css與Gatsby.js一起工作？

使用 Gatsby 配置 postCSS 插件有點棘手......如果有人設法讓 Tailwind 啟動並運行 Gatsby，我很想知道如何！

Answer 1

由於這篇文章，我設法使這個工作（包括熱重新加載）。

基本上我必須另外安裝 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 watch 和 build 腳本，並將這些腳本包含在我的默認開發和構建腳本中：

"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) 文件名和位置特定於我的項目。請隨意使用您自己的約定。）

如果這對你有用，請告訴我。

Answer 2

作為對 morgler 答案的補充，這是我最終得到的類似解決方案（包括 Sass 和 PurgeCSS）。

我采用了 CLI 解決方案，因為gatsby-plugin-postcss-sass目前在 Sass 之前運行 PostCSS（這打破了 Tailwind），而 Gatsby 的 PostCSS 插件目前通過 Webpack 配置有點困難。

我包含了 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 。 watch:腳本將在main.sass或其任何導入發生更改時運行 Sass + PostCSS（按此順序）。

要構建站點，請運行npm run build而不是gatsby build 。 build:腳本將運行 Sass + PostCSS（沒有監視任務）+ PurgeCSS（按此順序）。

以下內容添加到layouts/index.js導入after-postcss版本的main.css發展過程中和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 等效項，請隨時在此處發布。

Answer 3

我最近將它添加到 Gatsby starter 默認之上，並編寫了詳細的分步指南。

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

Answer 4

這是我的設置，並且與 Gatsby 完美配合：

tailwind.config.js

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

包.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;