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

Question

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

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

Answer 1

由于这篇文章,我设法让这个工作(包括热重新加载).

基本上我还要安装postcss和autoprefixer:

npm install autoprefixer postcss-cli

我postcss.config.js用这个内容添加了一个到我的Gatsby站点文件夹的根目录(tailwind.js是我的Tailwind配置 - 你的名字可能有所不同):

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

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

"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(打破Tailwind)之前运行PostCSS,而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:脚本将运行萨斯+ 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等价物,请随时在此处发布.