Compiled Tailwind CSS does not include custom imported files

Question

I'm having some trouble compiling TailwindCSS using npx as described in documentation. Webpack are doing his job! Both dev server and build dist are working with custom classes correctly! The problem is when I compile tailwindcss throught npx tailwindcss build tail.css -o tailwind.full.css. The custom imports are not included in result css file. So, the autocomplete does not complete my custom css keys.... all is working right, except npm tailwindcss build who does not compile my @import[ed] custom css files. How can I got this?

Here is my tail.css file informed in npx tailwind build command:

@import "./colors.css";

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

@import "./custom.css";

If I change the name of file for something wrong (as ./customnnnn.css), no errors are reported:

my console output:

npx tailwindcss build src/assets/css/tail.css -o src/assets/css/tailwind/tailwind.full.css

   tailwindcss 1.5.2

   � Building... src/assets/css/tail.css

   ✅ Finished in 3.53 s
   � Size: 1.9MB
   � Saved to src/assets/css/tailwind/tailwind.full.css

but if I change something like "tailwindcss/utilitiesssssss the result file are smaller, without utilities content. So, something says me that path map to my custom files are someway wrong in npx tailwind build utility, but I tried all ways of do that without success, and both dev and prod builds are working correctly when used the correct names of files, like documented instructions. So, the error is only on npx tailwind build utility! It could at least show some warning when not found some file listed in @import declaration, so we could moving ahead to solve this behavior.

So, how can I solve this behavior?

Thanks in advance!

StackOverflow rocks!

Bapi · Accepted Answer · 2021-06-01 11:03:36Z

-2

@import required to provide absolute directory. It will not compile through npx tailwindcss and ignore it as it's a basic css rule. So every time you use @import 'some file' with tailwindcss, Use absolute path. @import ../custom.css in your case. So browser can load it. Also note @import is not recommended as it can slow down the web rendering.

Modern tailwind use @tailwind to import base, utilities, etc. So always avoid @import.

edited Jun 1, 2021 at 11:03

answered Jun 1, 2021 at 10:56

Bapi

3172 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Compiled Tailwind CSS does not include custom imported files

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related