Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Clipboard landing page using Tailwind CSS

mstankaโ€ข 360

@mstanka

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone! This is my first project using Tailwind CSS. I used Purgecss to minify my build/tailwind.css file for production. However, it still seems to be too big with 1.32MB. Any idea of how to improve it? Thanks a lot! mstanka

Community feedback

P
Matt Studdertโ€ข 13,611

@mattstuddert

Posted

Hey Marketa, it's great to see you using the projects to try out new tools! How did you get on with Tailwind? Nice work resolving the issue with Purge CSS as well. Your solution looks awesome and scales down really well to mobile.

Keep up the great work! ๐Ÿ‘

0

mstankaโ€ข 360

@mstanka

Posted

@mattstuddert Hi Matt. Thanks a lot! I came across Tailwind on Scrimba. They offer a nice crash course https://scrimba.com/g/gtailwind. I watched also some youtube videos by Adam Wathan who works on Tailwind. They have good documentation with a lot of resources. It's pretty easy, I would say. I like the mobile-first approach, simplicity, and customizability. It went pretty well for me and I plan to use it for another project too. Keep working :)

0
P
Matt Studdertโ€ข 13,611

@mattstuddert

Posted

@mstanka awesome! I havenโ€™t tried it out yet, but can see how it would be a good approach. Iโ€™ll have to do a Tailwind FEM challenge myself! ๐Ÿ™‚

0
Vasilyโ€ข 250

@vasily-mishanin

Posted

Hi! I am not familiar with Tailwind CSS. According to the page it would take far less memory with SCSS and Gulp for converting to CSS. Don't judge me strictly I'm newbie:)

0

mstankaโ€ข 360

@mstanka

Posted

@vasily-mishanin Hi! Thanks a lot for your feedback. Yeh, I usually use SCSS. This time I wanted to learn something new. I looked into the issue today again and I managed to minify the file. The problem was to correctly set-up postcss.config.js file and to delete "ignore comments" in the css/tailwind.css file. It isn't a perfect solution, because it doesn't work when I add a condition for production only. But I'm happy about it now. Happy coding :)

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord