-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tailwind CSS (postcss plugin) does not work via gatsby-plugin-postcss-sass
#3208
Comments
Seems Gatsby (v1.9.127) processes .css through gatsby/packages/gatsby/src/utils/webpack.config.js Lines 421 to 426 in 50921a3
with the following dependencies gatsby/packages/gatsby/package.json Lines 82 to 86 in 50921a3
gatsby-plugin-postcss-sass then appears to be a fork of gatsby-plugin-sass which adds an optional config of postcss plugins to processing .sassgatsby/packages/gatsby-plugin-sass/src/gatsby-node.js Lines 23 to 28 in 50921a3
Current v2 branch has updated postcss dependencies gatsby/packages/gatsby/package.json Lines 79 to 84 in 569ca83
but loading postcss plugins now seems moved to webpack-utils.js gatsby/packages/gatsby/src/utils/webpack-utils.js Lines 108 to 125 in 569ca83
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 ;) |
@01ivr3 Just curious - were you ever able to get Tailwind working with Gatsby? I'm having trouble merging it into the postCSS pipeline via I'd be fine using it without Sass if that make it easier... Hope you got there in the end! |
@ooloth I posted a reply about this on you issue tailwindlabs/discuss#100 |
In case anyone finds it helpful, I posted my current CLI workaround for running Sass + Tailwinds + PurgeCSS with Gatsby here on StackOverflow. It's a bit more cumbersome than a Webpack solution, but it demonstrates a way to use any PostCSS plugins you like with Gatsby via Hope it helps! |
This is resolved in gatsby v2 |
There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates. Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 |
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 👍 |
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. InsteadGatsby 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
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
viagatsby-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
:package.json
:no change to
gatsby-node.js
,gatsby-browser.js
orgatsby-ssr.js
Actual result
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
3. add
@tailwind preflight;
or@tailwind utilities;
to any .css file in ./srcThe text was updated successfully, but these errors were encountered: