DEV Community

loading...

Discussion on: Dev.to clone with tailwind CSS

Collapse
bugsysailor profile image
Bugsy Sailor

I'm new to Tailwind, but a bit confused. Why is the CSS file 1.6MB?

Collapse
gillarohith profile image
Rohith Gilla Author

Hey, so we are using the default config along with custom config, we can reduce the size by deleting the colours from tailwind.js file.

Collapse
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻

File size can also be reduced by removing varients you don't need. Also, if you're comfortable with something like Purgecss, that'll remove every class you're not using. That'll really reduce file size.

Thread Thread
gillarohith profile image
Rohith Gilla Author

Wow thanks, will definitely check that out.

Thread Thread
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻

Purgecss is amazing. But do make sure you have it set up correctly to check source files. That's how it determines what classes you're using.

Depending on what tools you build with, you may also need to whitelist some selectors. That should be covered in the Purgecss docs.

Thread Thread
gillarohith profile image
Rohith Gilla Author

Oh cool thanks for the heads up, will be ready for it.

Thread Thread
jsn1nj4 profile image
JSn1nj4‍‍👨‍💻 • Edited

Oh, I need to add 1 more thing: I think Purgecss only runs when the environment is "production". This is to prevent issues in development if you change CSS classes in your markup without regenerating your CSS.

Some comments have been hidden by the post's author - find out more