CSS Specificity Visualizer + Tailwind Class Sorter — Two New Tools

Published: 1 month ago (March 27, 2026 at 07:07 PM EDT)

1 min read

Source: Dev.to

Source: Dev.to

CSS Specificity Visualizer

Compare selectors visually. Progress bars show relative weight. An A‑B‑C scoring system uses color codes (IDs red, classes yellow, elements blue). The winner is highlighted.

Specificity Visualizer

Tailwind Class Sorter

Sort messy Tailwind classes into the recommended order: layout → spacing → sizing → typography → colors → effects.

Tailwind Sorter

Full Toolkit

Explore the complete collection of 470 tools:

devtools-site-delta.vercel.app

Back to Blog

The Tailwind CSS Setup I Use on Every Project

I have been using Tailwind CSS for about 2 years now on every project. After a lot of trial and error, I settled on a setup that works well for building client...

CSS Box Model Visualizer, Meta Tag Checker, Regex Highlighter — 3 New Tools

3 new interactive tools CSS Box Model Visualizer Interactive margin, padding, border, and content visualization. Adjust sliders, see the box model update live....

Why ReactFlow Edges Disappear in Next.js (Two Subtle CSS and Context Bugs)

!nareshipmehttps://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fu...

CSS @starting-style: Animating Elements Into Existence

!Cover image for CSS @starting-style: Animating Elements Into Existencehttps://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=a...