search

strarsis / sage9-webpack5-tailwind

Sage 9 with webpack and tailwind
MIT License
9 stars 2 forks source link

tailwind.config.js ignored #1

Closed polp6880 closed 3 years ago

polp6880 commented 3 years ago

I'm using a fresh install, directly from this repo and I just noticed that the tailwind.config.js file is completely ignored, as in, any changes I do to this file, are not applied.

To give an example, the default configuration file includes a primary color of #525ddc however, when rendered, an element with 'bg-primary' has a background color of #007bff.

When inspecting the element, I see that the #525ddc color is not being applied at all and the #007bff color is coming from the file webpack:///./node_modules/bootstrap/scss/mixins/_background-variant.scss

I'm having the same result when adding custom fonts or changing the default font sizes in tailwind.config.js - they are completely ignored.

How can this be resolved, please?

polp6880 commented 3 years ago

Quick update on this one as I've had some time to test this further...

I noticed that from the default tailwind.config.js file, if I, for example, uncomment the 'colors' entry, I can see that the final build file is much larger than the original since now all 'colors' are being included - so actually, the config file is being loaded but not all options seem to be working.

I tested with the 'container' entry for example... changes here work fine.

Testing with the 'fontFamily' entry then, had no effect whatsoever.

So, it seems that only certain entries are either overridden or ignored.

polp6880 commented 3 years ago

Gonna answer my own issue... turns out that this version of the theme is calling _bootstrap.scss (in the autoload directory). This was indeed overriding several styles set in the main tailwind.config.js file.

In my case, deleting the 'autoload' directory did the trick as I don't need this.

strarsis commented 3 years ago

@polp6880: Thanks for the feedback! I removed the _bootstrap related files (they shouldn't be there anyway as tailwind is used as framework).