Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tailwind CSS (postcss plugin) does not work via `gatsby-plugin-postcss-sass`

See original GitHub issue

Description

The Tailwind CSS postcss plugin does not work when loaded via gatsby-plugin-postcss-sass

Install both plugins to a stock Gatsby site, include tailwindcss in gatsby-config.js as documented, and then add either @tailwind preflight; or @tailwind utilities; to a css file in ./src, this should inject Tailwind’s base and/or utility classes into the output css. Instead Gatsby Develop displays the following error: Module build failed: TypeError: atRule.before is not a function

Tailwind CSS seems to work fine via webpack 3 with the following dependencies

        "cross-env": "^5.1",
        "css-loader": "^0.28.7",
        "extract-text-webpack-plugin": "^3.0.2",
        "postcss": "^6.0.14",
        "postcss-cssnext": "^3.0.2",
        "postcss-loader": "^2.0.8",
        "style-loader": "^0.19.0",
        "tailwindcss": "^0.2.2",
        "webpack": "^3.8.1"

I’m not sure what versions of postcss gatsby-plugin-postcss-sass is using.

Is gatsby-plugin-postcss-sass the preferred method for loading PostCSS plugins on a Gatsby v1 site?

I’ve had no issues so far using cssnext via gatsby-plugin-post-sass

Environment

Gatsby version: 1.9.127 Node.js version: 8.9.3 Operating System: macos 10.13.2

File contents:

gatsby-config.js:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "gatsby": "^1.9.127",
    "gatsby-link": "^1.6.30",
    "gatsby-plugin-react-helmet": "^1.0.8",
    "gatsby-plugin-postcss-sass": "^1.0.15"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.8.2",
    "tailwindcss": "^0.3.0"
  }
}

package.json:

var tailwindcss = require('tailwindcss');

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-postcss-sass`,
      options: {
        postCssPlugins: [
          tailwindcss('./tailwind-config.js')
        ],
        precision: 8, // SASS default: 5
      },
    },
  ],
}

no change to gatsby-node.js, gatsby-browser.js or gatsby-ssr.js

Actual result

 ERROR  Failed to compile with 1 errors                                                                     19:37:56

 error  in ./src/layouts/index.css

Module build failed: TypeError: atRule.before is not a function
    at css.walkAtRules.atRule (/Users/ojs/Sites/gatsby-tailwind/node_modules/tailwindcss/lib/lib/substituteTailwindPreflightAtRule.js:14:14)
    at /Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:308:28
    at /Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:148:26
    at Root.each (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:114:22)
    at Root.walk (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:147:21)
    at Root.walkAtRules (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/container.js:306:25)
    at /Users/ojs/Sites/gatsby-tailwind/node_modules/tailwindcss/lib/lib/substituteTailwindPreflightAtRule.js:9:9
    at LazyResult.run (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:274:20)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:189:32)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)
    at LazyResult.asyncTick (/Users/ojs/Sites/gatsby-tailwind/node_modules/postcss/lib/lazy-result.js:201:22)

 @ ./src/layouts/index.css 4:14-120 13:2-17:4 14:20-126

Expected behavior

Tailwind CSS base styles and/or utility classes injected into output CSS

Steps to reproduce

1. npm install i -D gatsby-plugin-postcss-sass tailwindcss

2. add to gatsby-config.js

{
      resolve: `gatsby-plugin-postcss-sass`,
      options: {
        postCssPlugins: [
          tailwindcss('./tailwind-config.js')
        ],
        precision: 8, // SASS default: 5
      },

3. add @tailwind preflight; or @tailwind utilities; to any .css file in ./src

Issue Analytics

State:
Created 6 years ago
Reactions:8
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

01ivr3commented, Dec 16, 2017

Seems Gatsby (v1.9.127) processes .css through postcss-cssnext out-of-the-box via its default webpack.config.js https://github.com/gatsbyjs/gatsby/blob/50921a3a7612cfcbe930533baca963b733fe90c4/packages/gatsby/src/utils/webpack.config.js#L421-L426 with the following dependencies https://github.com/gatsbyjs/gatsby/blob/50921a3a7612cfcbe930533baca963b733fe90c4/packages/gatsby/package.json#L82-L86 gatsby-plugin-postcss-sass then appears to be a fork of gatsby-plugin-sass which adds an optional config of postcss plugins to processing .sass https://github.com/gatsbyjs/gatsby/blob/50921a3a7612cfcbe930533baca963b733fe90c4/packages/gatsby-plugin-sass/src/gatsby-node.js#L23-L28 Current v2 branch has updated postcss dependencies https://github.com/gatsbyjs/gatsby/blob/569ca835a0255904439436837c42c80e869123ba/packages/gatsby/package.json#L79-L84 but loading postcss plugins now seems moved to webpack-utils.js https://github.com/gatsbyjs/gatsby/blob/569ca835a0255904439436837c42c80e869123ba/packages/gatsby/src/utils/webpack-utils.js#L108-L125 and I no longer see postcss-cssnext included.

Apologies to anyone reading this. I’m not too familiar with Webpack or Gatsby’s plugin API. Just trying to unravel what’s going on 😉

0reactions

kakadiadarpancommented, Oct 10, 2018

This issue is being closed because there hasn’t been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍