Tailwindcss: postcss-import does not compile CSS

[andrewcroce]

I am attempting to use the @import method of using Tailwind as described in the docs. I am using Parcel Bundler to compile my assets.

My postcss.config.js:

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
}

My CSS file:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

The resulting compiled CSS file:

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

Looks like the @imports are inlining the contents of those tailwind source files, but the @tailwind directive isn't compiling out the actual CSS.

[adamwathan]

This is unfortunately a problem with Parcel:

https://github.com/parcel-bundler/parcel/issues/1165
On Jul 25, 2019, 1:33 PM -0400, Andrew Croce [e-mail], wrote:

I am attempting to use the @import method of using Tailwind as described in the docs. I am using Parcel Bundler to compile my assets.
My postcss.config.js:
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
],
}
My CSS file:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
The resulting compiled CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Looks like the @imports are inlining the contents of those tailwind source files, but the @tailwind directive isn't compiling out the actual CSS.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[andrewcroce]

Sigh. Thanks for the reference.

[Steffi3rd]

Hello guys, is there a solution for this?
Still have the same problem in 2020 🙁

[bholtbholt]

Found a counterintuitive/weird fix for this while working with Parcel.

Don't include postcss-import in your package, use @tailwind for tailwind, and @import for custom files

Here's what worked for me:

My postcss.config.js:

module.exports = {
  plugins: ['tailwindcss', 'postcss-nested', 'autoprefixer'], // I'm using nested styles in one of my imports
};

My CSS entry: css/index.css:

@import './variables';
@tailwind base;
@tailwind components;
@import './button';
@import './loading-dots';
@tailwind utilities;

My output CSS:

// variables
// button
// loading-dots
// tailwind base
// tailwind components
// tailwind utilities

So Parcel doesn't seem to care about your import order, and automatically shifts imports to the top.