Tailwind Class Sorter

Our whiteboard after Saturday

Inspiration

Tailwind classes can get disorganized and messy. It can be difficult to see what styles are applied to each HTML element at a glance, so we wanted a way to sort these classes in a way that makes sense to the developer.

What it does

The Tailwind Class Sorter 3000 reorganizes Tailwind class tags based on user preference. The user sets their preferred order on a web app, uploads their HTML, and the app reorders the classes and downloads the new HTML file.

How we built it

Javascript, HTML, Tailwind. The app uses DOMParser to parse the HTML file, checks each element for any Tailwind classes in the "class" string, reorders the classes based on user preference, writes the classes back to each element, and downloads the new file.

Challenges we ran into

We originally built this in Node with the help of a Javascript library called jssoup, which is a Javascript equivalent to BeautifulSoup, a Python web scraping library. We had it working, but we realized we would not have enough time to convert it into a VSCode extension as originally planned, so we created a web app. This is when we realized that the jssoup library only worked in Node and not in the browser! So we had to scramble to convert the code from using jssoup to DOMParser. We learned a ton about Javascript (we are all brand new to the language), how the backend and frontend communicate, and have become much, much more comfortable using git to manage a project.

Accomplishments that we're proud of

Everything! Considering how new we all are to Javascript, we are very happy to have a working application that improves the developer experience with Tailwind. We had to scramble to refactor the codebase after already coding for 12 hours, we kept cool heads and continued to work together and claw the project into a working state. This is a tool we can actually use, and the logic is there to turn this into a more user-friendly VSCode extension in the future.

What we learned

Javascript and git. We forced ourselves to understand git commands and trust the tool to manage the project. We learned a valuable lesson that some libraries and frameworks only work in Node and some only in the browser. Seems obvious now, but it's a mistake we won't make again. The value of planning and breaking problems down beforehand in a real situation was invaluable.

What's next for Tailwind Class Sorter

Uploading an HTML file to a webapp and downloading a new file isn't the most user-friendly experience, so we'd love to convert this into a VSCode extension and offer the user a .diff comparison after sorting the Tailwind classes. We've already got the Node function logic to do this, but we will need to read up on the VSCode Extension API. Colour-coding the classes in VSCode would also be helpful.

Our team consists of 4 Term 1 CST students from the DTC!