Justify-between not working with Tailwind

I made a todo list project and I used Tailwind and when I uploaded the project on netlify, it doesnt recognize the justify-between there and just ignores it. It does this with some other things like text size cursor pointer and I cant figure out why this is happening. Please help me in fixing this Github repo: https://github.com/Pulkit-s21/todo-list.git Live Site URL: https://todo-list-f26be6.netlify.app/
GitHub
GitHub - Pulkit-s21/todo-list
Contribute to Pulkit-s21/todo-list development by creating an account on GitHub.
15 Replies
Mannix
Mannix•3y ago
I don't see it being declared anywhere ?
Jochem
Jochem•3y ago
yeah, I think your build tools ate the class definition somewhere, did you rebuild it after adding the class? it's set on the li:
<li class="list-group-item md:text-xl text-white flex justify-between p-4 px-8 shadow-md shadow-black">
<li class="list-group-item md:text-xl text-white flex justify-between p-4 px-8 shadow-md shadow-black">
but it's missing from index.css where all the other tailwind classes are defined
Jochem
Jochem•3y ago
and if I add it in the dev tools, it works like it should for the li at least:
Jochem
Jochem•3y ago
seems like gap-6 is also getting eaten on the div holding the buttons definitely a build tool issue
Killer🔪
Killer🔪•3y ago
How can I fix this because I tried making the whole project again but same thing happens everytime
Jochem
Jochem•3y ago
I'm not really familiar with the build process on Netlify, so I don't know exactly, sorry
Killer🔪
Killer🔪•3y ago
Should I try some other site?
Jochem
Jochem•3y ago
not really familiar with any others either, so I couldn't say
Killer🔪
Killer🔪•3y ago
Ohk thanks for the help
Mannix
Mannix•3y ago
it looks like it doesn't take into account classes declared in the js file when the tailwind classes are getting compiled yep you didn't configure your tailwaind config to go through js file to compile the classes
Mannix
Mannix•3y ago
Mannix
Mannix•3y ago
change "./src/**/*.{js,ts,jsx,tsx}", to "./*.js" in the tailwind config file @killer.wrath "./main.js" should also work
Killer🔪
Killer🔪•3y ago
Ooh great help @mannix_ Thanks alot Issue is fixed now also can you explain what do "./src/**/*.{js,ts,jsx,tsx}" mean in the file I am new to tailwind so dont know every detail
Jochem
Jochem•3y ago
it's telling it to look in the src folder, all subfolders (/**/), and then look at all files with the extension js, ts, jsx, or tsx. *. matches all files up to the last . in the filename, and then {js,ts,jsx,tsx} matches one of those extensions. Basically you're telling tailwind that all the classes it needs to gather classes from, are inside src or its subfolders. Your main.js isn't inside the src folder most framework based projects use, so it didn't find it and couldn't gather the classes from it
Killer🔪
Killer🔪•3y ago
ooh thanks so much for this
Want results from more Discord servers?
Add your server