I need help as google, AI and my search on Dev.to has resulted in no findings.
I'm somewhat new to Tailwindcss. I rewrote my whole site in it and it's working beautifully. It's performant for what I need.
However, I ran into an issue. First let's understand how I'm using it so you can tell me where I went wrong and how to fix it :P
My project started off with React. So we'll call it the "App".
Overtime, the performance and seo just wasn't cutting it so I realized I needed to move my blog portion over to a static setup, so I chose Nextjs.
We'll call this part of the site, the "Blog".
When I built the blog, I wanted it to share the same look and feel without repeating my work. So I abstracted out the component-library.
For simplicity, it's the "library"
So I have tailwind in all three. This might have been my mistake but I've seen it done before so I know it works.
App: React/Webpack
Blog: Nextjs
Library: React/vite
Tailwind configs all match for each project.
So both the App and the Blog, have their own tailwindcss index file as well as the Library tailwind file. It seems buggy.
95% of my styles work but others seems to be lost and confused by which one overwrites which.
I may have solved most of the issue last night by removing @tailwind base from the apps since it's passed through the Library but not all of them.
A few takeaways.
- I should have considered this at the start but I think I was just running with it being new to it.
- This shows that perhaps I did not read the docs fully. RTFM
- Yes, I'm aware Nextjs has zones which would allow me to share the apps. I chose apache2 as my server because I've seen better load times for the App.
Let me know if I need to add more details like how my site is actually configured with screenshots and what not.
If you help me fix this I'll buy you a coffee no problem! :)
Top comments (2)
I don't think there should be overwriting unless you change something like
.blue-700to be a different blue for different parts of your app?Could you post an example of where the style isn't applying? Preferably a link to the page and screenshot of which element if the site is available somewhere (repo too if it's public).
A quick note on
@tailwind basebecause it took a long time to figure out when I started using it:tailwind baseadds in all the "Hard Reset" CSS which essentially sets every element to default to no styling. If removing it fixed the issue, then something about the element that was fixed is probably dependent on standard styling (Browser level defaults).This includes things like setting
h1,h2,h3, etc.. to all be the same font size and not bold, removing default alignments and margins.Hopefully this is helpful 😊
Let me see what I can come up with far as examples and I'll reach out. Thank you!