Tailwind CSS vs SASS

Side-by-Side Comparison

What SASS Adds Over Plain CSS

// SASS: variables
$primary: #4f46e5;
$radius: 0.5rem;
$font-base: "Inter", sans-serif;

// SASS: nesting
.card {
  background: white;
  border-radius: $radius;

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .card__title {
    font-size: 1.25rem;
    color: $primary;
  }
}

// SASS: mixins
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero {
  @include flex-center;
  min-height: 60vh;
}

// SASS: @use for modular files
@use "variables" as v;
@use "mixins" as m;

.button {
  background: v.$primary;
  @include m.flex-center;
}

SASS compiles all of this to standard CSS. The DX benefit is writing less repetitive code, sharing values via variables, and organising large CSS codebases with @use / @forward.

The Tailwind Approach

<!-- Tailwind: all styles inline as utility classes -->
<!-- No separate CSS file needed for this component -->
<div class="bg-white rounded-lg border border-slate-200 p-6 hover:shadow-md transition-shadow">
  <h2 class="text-xl font-semibold text-slate-900 mb-2">
    Card Title
  </h2>
  <p class="text-slate-500 text-sm leading-relaxed">
    Card body text goes here.
  </p>
  <a
    href="#"
    class="mt-4 inline-block bg-indigo-600 text-white font-medium
           px-4 py-2 rounded-md text-sm hover:bg-indigo-500 transition-colors"
  >
    Read more
  </a>
</div>

<!-- Tailwind config defines your design tokens once: -->
<!-- tailwind.config.js -->
<!-- theme.extend.colors.brand = { 600: "#4f46e5" } -->
<!-- Then: bg-brand-600 everywhere -->

<!-- For repeated patterns, extract with @apply in a .css file: -->
<!-- .btn-primary { @apply bg-indigo-600 text-white px-4 py-2 rounded; } -->

With Tailwind, you define your design system once in tailwind.config.js and use it everywhere through generated utility classes. The JIT engine scans your source files at build time and only emits CSS for classes you actually use.

Using Tailwind and SASS Together

They are complementary, not competing. A common real-world setup:

• Tailwind for all component-level styles (buttons, cards, layouts, typography scales)
• SASSfor global resets, animation keyframes, overriding third-party library CSS, and complex CSS that doesn't fit utilities

/* global.scss — SASS handles the global layer */
@use "sass:color";
@use "./variables" as v;

/* Override a third-party lib that can't use Tailwind */
.react-datepicker {
  font-family: v.$font-base !important;
  border-radius: 0.75rem !important;
}

/* Complex keyframe animation */
@keyframes slide-in-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.animate-slide-in {
  animation: slide-in-up 0.3s ease-out;
}

/* ---- Everything else uses Tailwind in JSX ---- */
/*
<div className="bg-white rounded-2xl p-6 animate-slide-in">
  Component styled with Tailwind + SASS animation
</div>
*/

Frequently Asked Questions