In tegenstelling tot populaire CSS frameworks als Bootstrap of Foundation, hanteert Tailwind een utility-first aanpak. Daar waar je in de meeste frameworks verschillende classes in je CSS moet voorzien voor de verschillende stijlen van bijvoorbeeld een knop, heeft Tailwind als doel om de context tussen stijl en inhoud beter van elkaar te scheiden. Dit doet Tailwind door een groot aantal utility classes te voorzien die je overal kan gebruiken.
Een voorbeeld van een opgemaakte knop in Bootstrap:
<button type="button" class="btn btn-primary">Primary</button>
Hetzelfde voorbeeld in Tailwind:
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Primary</button>
De meeste frameworks werken met vaste componenten, die elk een unieke context definiëren (denk aan de BEM naming convention). Daarnaast genieten ze van hele specifieke en herkenbare stijlen, meestal in combinatie met terugkerende utility stijlen. Hierdoor oogt het resultaat dikwijls zeer gelijkaardig en krijg je het ‘Bootstrap' effect. Websites of applicaties lijken hierdoor sterk op elkaar omdat ze onderliggend allen met hetzelfde framework gebouwd zijn.
Daarnaast ontstaat er ook veel dubbele code als je veel gelijkaardige componenten bouwt die toch net iets anders moeten fungeren. Het idee achter Tailwind is om de classes zodanig te versimpelen dat elke class een klein deeltje unieke functionaliteit bevat, die overal gebruikt kan worden.
Op die manier schrijf je bijna al je stijlen inline, op basis van de voorgedefinieerde Tailwind waardes. Je hebt met Tailwind ook de optie om deze toch nog te overschrijven in de globale configuratie van Tailwind.