Vue.js Compiled Tailwind CSS does not include custom imported files

Vue.js Compiled Tailwind CSS does not include custom imported files,vue.js,tailwind-css,Vue.js,Tailwind Css,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] cus

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!


#1

@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.