Tailwind CSS and SASS (or SCSS) are two of the most popular tools in modern front-end development — but they serve different purposes. Tailwind CSS is a utility-first CSS framework that allows you to build interfaces rapidly without leaving your HTML, while SASS is a CSS preprocessor that adds programming-like features such as variables, nesting, and mixins to make styles more maintainable.

A common question developers ask is:

“Can I use Tailwind CSS and SASS together in the same project?”

The short answer is yes, you can — and in many cases, combining them can give you the best of both worlds. Tailwind provides consistency and speed through its utility classes, while SASS offers flexibility and organization for custom or complex CSS logic.

In this tutorial, you’ll learn how to set up a workflow that integrates Tailwind CSS with SASS from scratch. We’ll go step-by-step through:

Installing and configuring Tailwind and SASS together in one project
Structuring your files for clean and scalable styling
Using SASS features (variables, mixins, nesting) alongside Tailwind utilities
Best practices for when and how to combine both effectively

By the end, you’ll understand not only how to use Tailwind CSS and SASS together, but also when it’s worth doing so in your own projects.

Prerequisites

Before diving into the setup, let’s make sure you have everything ready to follow along smoothly. This tutorial assumes you have a basic understanding of HTML, CSS, and a little familiarity with Tailwind CSS or SASS syntax. You don’t need to be an expert — we’ll go step-by-step.

What You’ll Need

Node.js and npm (or yarn) – required for installing Tailwind and SASS packages.

💡 You can check if they’re installed by running node -v and npm -v in your terminal.
If not, download and install them from nodejs.org.
A code editor – VS Code is recommended for its excellent support for both Tailwind CSS and SASS.
A basic project setup – this tutorial will use a Vite + vanilla JavaScript project for simplicity.
However, the same approach applies to React, Vue, Angular, or Next.js — the integration steps are almost identical.

What You’ll Learn

By the end of this tutorial, you’ll be able to:

Set up a Tailwind CSS and SASS workflow in a modern front-end environment.
Configure PostCSS to process both Tailwind and SASS styles.
Use SASS features like variables, nesting, and mixins alongside Tailwind’s utility classes.
Understand when to use SASS vs Tailwind for different styling needs.

Setting Up the Project

In this section, you’ll create a simple project where Tailwind CSS and SASS work seamlessly together. We’ll use Vite because it’s fast, lightweight, and works well with modern front-end workflows.

Step 1: Create a New Vite Project

Open your terminal and run the following command to scaffold a new project using Vite:

npm create vite@latest tailwind-sass-demo

When prompted:

Select a framework: choose Vanilla
Select a variant: choose JavaScript

Then, navigate into your project folder:

cd tailwind-sass-demo

Install the project dependencies:

npm install

Step 2: Install Tailwind CSS and Dependencies

Next, install Tailwind CSS and its required PostCSS tools:

npm install tailwindcss @tailwindcss/postcss postcss

Add @tailwindcss/postcss to your postcss.config.mjs file, or wherever PostCSS is configured in your project.

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

Add an @import to your CSS file that imports Tailwind CSS.

@import "tailwindcss";

Run your build process with npm run dev or whatever command is configured in your package.json file.

npm run dev

Step 3: Install SASS

Now, install SASS as a development dependency:

npm install -D sass

This allows you to use .scss files instead of plain .css files.

Step 4: Set Up Folder Structure

Inside your project, create the following folder structure for organization:

tailwind-sass-demo/
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
├── src/
│   ├── main.js
│   └── styles/
│       ├── style.scss
│       └── _variables.scss

style.scss – main SASS file that imports Tailwind and custom styles.
_variables.scss – an example partial file where you’ll define reusable SASS variables.

Step 5: Add Tailwind Directives in SCSS

Open src/styles/style.scss and add the Tailwind layers:

@use "tailwindcss" as *;

// Example custom SASS variable usage
@use 'variables' as *;

body {
    font-family: 'Inter', sans-serif;
    background-color: $bg-color;
}

And in _variables.scss, define your custom variable:

$bg-color: #f9fafb;

Step 6: Import Styles in Your Entry File

Finally, open src/main.js and import your main SASS file:

import './styles/style.scss';

Now you’re ready to configure Tailwind and see both systems in action.

Configure Tailwind and SASS

Now that your project structure and dependencies are in place, it’s time to configure Tailwind CSS and SASS to work together. Both tools rely on PostCSS to process styles, so we’ll make sure the configuration ensures proper order and compatibility.

Step 1: Configure Tailwind Content Paths

Open your tailwind.config.js file and update it to include all your template paths — this tells Tailwind where to look for class names to generate the CSS utilities:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

💡 Tip: Adjust the content paths if you’re using frameworks like React (.jsx) or Vue (.vue).

Step 2: Check PostCSS Configuration

Next, open postcss.config.js that was created. Make sure it looks like this:

export default {
  plugins: {
    tailwindcss: {},
  },
}

PostCSS will first run Tailwind to generate utility classes, then apply vendor prefixes automatically.

Step 3: Verify SASS Compilation Order

Vite automatically processes .scss files using SASS before passing them to PostCSS. This means your @tailwind directives, SASS variables, and custom styles all merge correctly in a single pipeline:

SASS compilation → resolves variables, nesting, and imports.
Tailwind via PostCSS → generates utility classes based on your content.
Autoprefixer → adds browser-specific prefixes.

This order ensures both Tailwind and SASS work smoothly together.

Step 4: Test Your Build

Run your development server:

npm run dev

You should see output similar to:

VITE v7.1.12  ready in 479 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Open the link in your browser — if everything is set up correctly, Tailwind’s default styles and your custom SASS variables (like $bg-color) will both be applied.

Step 5: Verify Tailwind and SASS Integration

To confirm both are active, edit your index.html and add a few Tailwind classes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tailwind-sass-demo</title>
  </head>
  <body>
    <div class="min-h-screen flex items-center justify-center">
      <h1 class="text-4xl font-bold text-blue-600">
        Tailwind + SASS Workflow 🚀
      </h1>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Then tweak the $bg-color value in _variables.scss to something noticeable like #e0f7fa.
When you save the file, the background should instantly update — proving SASS is compiling while Tailwind utilities are also active.

Tailwind CSS + SASS Workflow: Can You Use Them Together? - example 1

You’ve now successfully configured Tailwind CSS and SASS to work together. 🎉

Using SASS with Tailwind

Now that your Tailwind and SASS setup is working, let’s explore how you can use SASS features such as variables, nesting, and mixins alongside Tailwind utility classes. This combination gives you both rapid prototyping (Tailwind) and fine-grained control (SASS).

1. Using Variables for Consistent Styling

You can define color variables, spacing units, or font sizes in your _variables.scss file and use them anywhere in your SASS styles.

src/styles/_variables.scss

$primary-color: #3b82f6; // Tailwind's blue-500
$secondary-color: #f59e0b; // Tailwind's amber-500
$border-radius: 0.5rem;

Now import them with the modern Sass syntax in your main stylesheet:

src/styles/style.scss

@use "tailwindcss" as *;

// Example custom SASS variable usage
@use 'variables' as *;
@use 'mixins' as *;
@use "sass:color";

body {
    font-family: 'Inter', sans-serif;
    background-color: $bg-color;
}

.button-custom {
    background-color: $primary-color;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: $border-radius;
    transition: background-color 0.2s ease;

    &:hover {
        background-color: color.adjust($primary-color, $lightness: -10%);
    }
}

💡 Tip: You can use the same color palette between Tailwind and SASS by aligning your SASS variables with Tailwind’s theme colors.

2. Nesting Selectors for Cleaner CSS

SASS allows you to nest selectors for better readability and structure — something CSS doesn’t natively support (until very recently).

For example, if you have a card component:

.card {
  @apply bg-white shadow-md rounded-xl p-6;

  h2 {
    @apply text-xl font-semibold mb-2;
  }

  p {
    @apply text-gray-600 text-sm;
  }

  &:hover {
    @apply shadow-lg;
  }
}

Here we’re combining SASS nesting with Tailwind’s @apply directive, which lets you use Tailwind utilities directly inside your custom classes.

This approach is great for reusable UI components that need more structured styling.

3. Creating Mixins for Reusable Styles

Mixins in SASS are perfect for encapsulating reusable style patterns that Tailwind alone might not cover.

src/styles/_mixins.scss

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

Import and use it with Tailwind classes in combination:

src/styles/style.scss

@use 'variables' as *;
@use 'mixins' as *;

.hero-section {
  @include flex-center;
  @apply bg-gradient-to-r from-blue-500 to-indigo-600 text-white h-screen;
}

This mixin keeps your layout logic DRY while Tailwind handles the visual design.

4. When to Use SASS vs Tailwind

Use Tailwind For	Use SASS For
Rapid layout building using utilities	Reusable logic like mixins or loops
Global design tokens in `tailwind.config.js`	Scoped component styles
Responsive design utilities (`md:`, `lg:`)	Complex selectors or animations
Dark mode or theme variants	Nesting and advanced syntax

⚡ Rule of Thumb: Use Tailwind for most layout and utility work, and reserve SASS for complex, logical, or reusable styling.

You now know how to effectively combine SASS features with Tailwind’s utilities to create cleaner, scalable, and DRY styles.

Combining Tailwind’s Utility Classes with SASS Features

Now that you’ve seen how Tailwind CSS and SASS can coexist, let’s take it one step further — by combining Tailwind’s powerful utility classes with modern SASS features such as variables, color manipulation, and nesting.

This hybrid workflow lets you leverage Tailwind for rapid layout building while still using SASS for dynamic logic and clean organization.

1. Syncing Tailwind and SASS Design Tokens

One of the biggest advantages of using SASS with Tailwind is that you can reuse the same colors, spacing, and font sizes between the two.

Start by defining your SASS variables in _variables.scss that match your Tailwind theme:

src/styles/_variables.scss

$primary-color: #3b82f6; // Tailwind blue-500
$secondary-color: #f59e0b; // Tailwind amber-500
$text-dark: #1f2937; // Tailwind gray-800
$radius-md: 0.5rem;
$border-radius: 0.375rem;

Now you can use these same values in both your SASS files and Tailwind config.

tailwind.config.js

export default {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#f59e0b',
        textDark: '#1f2937',
      },
      borderRadius: {
        md: '0.5rem',
      },
    },
  },
};

💡 This ensures design consistency — your UI colors remain in sync across Tailwind utilities and SASS-based custom styles.

2. Using Tailwind Utilities Inside SASS Components

While you should avoid using @apply inside .scss files directly (to prevent compiler conflicts), you can still combine Tailwind classes and SASS logic by using both files together.

For example, define a component that uses SASS for logic and Tailwind for structure:

src/styles/_custom.scss

@use "sass:color";
@use "variables" as *;

.card {
  // Tailwind-like structure using SASS
  background-color: $primary-color;
  color: white;
  border-radius: $radius-md;
  padding: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;

  &:hover {
    // Modern Sass color adjustment
    background-color: color.scale($primary-color, $lightness: -10%);
  }

  h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  p {
    color: color.scale(white, $lightness: -20%);
  }
}

Then use Tailwind utility classes in your HTML for layout:

<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div class="card max-w-md">
    <h2>Tailwind + SASS Card</h2>
    <p>Combining utility classes with SASS logic and variables.</p>
  </div>
</div>

This approach keeps your styling logic modular (via SASS) and your layout consistent (via Tailwind) — the best of both worlds.

3. Mix Tailwind Config Tokens with SASS

If you want to access your Tailwind theme values dynamically in SASS, you can export them using CSS custom properties in tailwind.config.js:

tailwind.config.js

export default {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
    },
  },
  plugins: [
    function ({ addBase, theme }) {
      addBase({
        ':root': {
          '--color-primary': theme('colors.primary'),
        },
      });
    },
  ],
};

Then in your SASS file:

.card {
  background-color: var(--color-primary);
}

This allows Tailwind’s theme system and your SASS variables to share a single source of truth.

4. Summary of Best Practices

Use Case	Recommended Approach
Shared design tokens	Define variables in SASS and Tailwind config
Reusable logic (mixins, loops)	Use SASS modules (`@use`, `@forward`)
Layout and spacing	Use Tailwind utility classes
Hover or color variations	Use modern Sass `color.scale()` or `color.adjust()`
Component-based styling	Write in `.scss`, and combine with Tailwind layout in HTML

⚡ Pro Tip: Think of Tailwind as your layout and utility system, and SASS as your styling logic layer — combining them gives you flexibility without losing maintainability.

You now have a powerful, future-proof workflow where Tailwind CSS handles utilities and SASS manages structure and logic, all using modern Sass module syntax and color utilities.

Build and Test

Now that everything is configured and our styles are blending Tailwind utilities with modern SASS features, it’s time to build and test the final output to ensure everything works as expected.

1. Start the Development Server

If you’re using Vite, simply run:

npm run dev

This command will:

Start the local development server.
Watch for changes in your .scss and .html files.
Automatically recompile both Tailwind and SASS styles when you make edits.

Once it’s running, open your browser and visit the provided local address (usually http://localhost:5173).

You should now see your styled page with both Tailwind and SASS features applied — including your SASS variables and Tailwind utilities working together.

2. Test SASS + Tailwind Integration

Try adding or modifying some styles in your style.scss file to confirm that both systems are active.

For example, add a new button variant:

.btn-secondary {
  background-color: color.adjust($secondary-color, $lightness: -10%);
  @apply text-white py-2 px-4 rounded-md hover:opacity-90;
}

Then use it in your HTML:

<button class="btn-secondary">Secondary Button</button>

When you refresh the page, you should see your new button styled correctly — proving that Tailwind’s @apply and SASS color functions work seamlessly together.

3. Create a Production Build

Once you’re happy with the results, build the project for production:

npm run build

Vite (or your chosen bundler) will:

Compile all your SASS into optimized CSS.
Process and purge unused Tailwind classes.
Output a minified and performance-ready dist folder.

You can preview your production build locally with:

npm run preview

Your final CSS bundle will be lean, clean, and efficient — combining the best of both worlds: Tailwind’s utility-first design and SASS’s structured, reusable styles.

Best Practices and Optimization Tips

Now that your Tailwind + SASS workflow is running smoothly, let’s go through some best practices and optimization strategies to keep your project clean, scalable, and production-ready.

🧩 1. Use SASS for Structure, Tailwind for Speed

One of the main advantages of combining Tailwind and SASS is flexibility.
However, you should use them strategically:

Tailwind CSS → Use for layout, spacing, typography, and utilities.
SASS → Use for variables, mixins, color manipulation, and reusable component styles.

Example:

// _button.scss
@use 'variables' as *;

.btn {
  background-color: $primary-color;
  border-radius: $border-radius;
  @apply text-white font-medium py-2 px-4 hover:opacity-90;
}

This approach keeps your utility-first mindset while leveraging SASS for customization.

⚙️ 2. Organize Your Styles into Modules

As your project grows, organize your SASS files into a modular structure:

src/
└── styles/
    ├── _variables.scss
    ├── _mixins.scss
    ├── _buttons.scss
    ├── _layout.scss
    ├── _forms.scss
    └── style.scss

Then, in your main style.scss:

@use 'variables' as *;
@use 'mixins';
@use 'buttons';
@use 'layout';
@use 'forms';

This keeps your code clean and maintainable while ensuring variables and mixins are shared across modules.

⚡ 3. Take Advantage of Tailwind’s JIT and Purge

Tailwind’s Just-in-Time (JIT) compiler automatically removes unused CSS and generates only what you use.
Make sure your tailwind.config.js file has the correct content paths:

// tailwind.config.js
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,scss}'],
  theme: { extend: {} },
  plugins: [],
}

This ensures no unnecessary CSS is included in your final build — keeping your styles lightweight.

🎨 4. Use the Modern SASS Color Module

Avoid deprecated color functions like darken() and lighten().
Instead, use the modern SASS color module for more control and consistency:

@use 'sass:color';

.btn-primary {
  background-color: $primary-color;
  &:hover {
    background-color: color.adjust($primary-color, $lightness: -10%);
  }
}

This makes your code future-proof and aligned with Dart Sass 3.0+ standards.

🧠 5. Avoid Overusing `@apply`

While @apply is handy, it’s best used for common component patterns (e.g., buttons, alerts, cards).
Avoid chaining too many utilities inside @apply — it can reduce clarity and maintainability.

For example, keep this:

.btn {
  @apply bg-blue-500 text-white rounded-md;
}

Instead of this:

.btn {
  @apply bg-blue-500 text-white rounded-md px-6 py-3 font-bold shadow-lg hover:bg-blue-600 focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 transition duration-200;
}

If you find yourself doing the latter often, it’s time to create a Tailwind component class or a custom SASS mixin instead.

🧹 6. Run Regular Audits

Before deploying, always:

Run npm run build to purge and minify CSS.
Check your output CSS size.
Use browser dev tools to confirm your custom SASS and Tailwind classes don’t overlap or conflict.

🚀 7. Version Control and Documentation

Document your design tokens (colors, fonts, spacing) and maintain them in _variables.scss.
Keep your tailwind.config.js in sync with your SASS values for a unified design language across utilities and components.

Example:

// tailwind.config.js
theme: {
  extend: {
    borderRadius: {
      md: '0.375rem', // matches $border-radius in _variables.scss
    },
  },
}

This ensures visual consistency and easier collaboration across teams.

Conclusion and Next Steps

By now, you’ve learned how to successfully combine Tailwind CSS and SASS into a single, powerful workflow — balancing Tailwind’s speed and consistency with SASS’s flexibility and structure.

Here’s a quick recap of what you achieved:

✅ Set up a modern development environment with Vite, Tailwind CSS, and SASS.
✅ Configured PostCSS to compile Tailwind utilities and process SASS syntax together.
✅ Used SASS modules (@use and @forward) for variables, mixins, and partials.
✅ Integrated modern SASS color functions for theme control and hover effects.
✅ Learned best practices for maintaining clean, scalable, and optimized CSS.

When to Use Tailwind + SASS Together

When you need custom design tokens (variables, mixins) alongside Tailwind’s utility-first classes.
When working on large-scale projects with multiple developers or component libraries.
When you want to extend Tailwind’s default theme without cluttering the config file.

However, if your project is small or heavily component-based (like with React or Next.js), Tailwind alone may be sufficient — SASS is best added when your design system or brand styling gets more complex.

Next Steps

To continue improving your workflow:

🔧 Integrate CSS variables for theme switching (dark/light modes).
🧱 Create reusable SASS mixins for consistent UI patterns.
⚙️ Automate builds and linting using tools like Stylelint and Prettier.
🌐 Explore Tailwind plugins such as typography, forms, or aspect-ratio.
🚀 Consider integrating Tailwind CSS + SASS in frameworks like React, Vue, or Angular for a component-driven architecture.

Combining Tailwind CSS and SASS is more than just a technical trick — it’s a workflow that empowers teams to code faster, cleaner, and smarter, especially in design-heavy or enterprise environments.

You can find the full source code on our GitHub.

That's just the basics. If you need more deep learning about CSS, SASS, SCSS, TailwindCSS, you can take the following cheap course:

Thank!

Tailwind CSS + SASS Workflow: Can You Use Them Together?

Learn how to combine Tailwind CSS and SASS in one workflow. Set up, configure, and optimize both tools for faster, cleaner, and scalable styling.

Table of Contents:

Prerequisites

What You’ll Need

What You’ll Learn

Setting Up the Project

Step 1: Create a New Vite Project

Step 2: Install Tailwind CSS and Dependencies

Step 3: Install SASS

Step 4: Set Up Folder Structure

Step 5: Add Tailwind Directives in SCSS

Step 6: Import Styles in Your Entry File

Configure Tailwind and SASS

Step 1: Configure Tailwind Content Paths

Step 2: Check PostCSS Configuration

Step 3: Verify SASS Compilation Order

Step 4: Test Your Build

Step 5: Verify Tailwind and SASS Integration

Using SASS with Tailwind

1. Using Variables for Consistent Styling

2. Nesting Selectors for Cleaner CSS

3. Creating Mixins for Reusable Styles

4. When to Use SASS vs Tailwind

Combining Tailwind’s Utility Classes with SASS Features

1. Syncing Tailwind and SASS Design Tokens

2. Using Tailwind Utilities Inside SASS Components

3. Mix Tailwind Config Tokens with SASS

4. Summary of Best Practices

Build and Test

1. Start the Development Server

2. Test SASS + Tailwind Integration

3. Create a Production Build

Best Practices and Optimization Tips

🧩 1. Use SASS for Structure, Tailwind for Speed

⚙️ 2. Organize Your Styles into Modules

⚡ 3. Take Advantage of Tailwind’s JIT and Purge

🎨 4. Use the Modern SASS Color Module

🧠 5. Avoid Overusing @apply

🧹 6. Run Regular Audits

🚀 7. Version Control and Documentation

Conclusion and Next Steps

When to Use Tailwind + SASS Together

Next Steps

Related Articles

🧠 5. Avoid Overusing `@apply`