CODEWITHSUNDEEP
tailwind-css
Jonas Follesø
Jonas Follesø

Reputation: 6531

Tailwind CLI not importing external files

I am using Tailwind CSS 3.0 and have configured it according to the Using with Preprocessors documentation.

My main.css file looks like this:

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";

My postcss.config.js looks like this:

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {}
  }
}

The directory structure looks like this:

Styles/v2
├── custom-base-styles.css
├── custom-components.css
└── main.css
wwwroot/dev
└── v2
    └── main.css

And I execute the following command to build my main.css file:

npx tailwindcss -i ./Styles/v2/main.css -o ./wwwroot/dev/v2/main.css --watch

The build is executed and my wwwroot/dev/v2/main.css file is produced, but none of the additional changes added in my custom styles are included. Also; the --watch argument is listening for changes to the main.css input file, but non of the @import-ed files.

Upvotes: 8

Views: 2454

Answers (2)

mhenrixon
mhenrixon

Reputation: 6278

This should also do the trick!

tailwindcss -i ./Styles/v2/main.css -o style.css --postcss

Upvotes: 2

Jonas Follesø
Jonas Follesø

Reputation: 6531

It turns out I wasn't actually using PostCSS directly when using npx tailwindcss. As explained on the Tailwind CSS Getting Started guide, Tailwind CLI and PostCSS are two different ways of using Tailwind.

So in the above question, the answer is to use PostCSS CLI and invoke the build using: postcss ./Styles/v2/main.css -o style.css --watch.

Upvotes: 1

Related Questions