How to Use SCSS with Tailwind CSS

Tailwind CSS and SCSS are both powerful tools for styling modern web applications. While Tailwind CSS provides utility-first classes, SCSS enables advanced styling with variables, mixins, and nesting. Combining these two can elevate your frontend development experience. Here's a step-by-step guide on how to integrate SCSS with Tailwind CSS.

Steps to Use SCSS with Tailwind CSS

1. Install Required Dependencies

First, ensure that you have both Tailwind CSS and SCSS installed in your project. You can install SCSS using npm:

npm install sass --save-dev

If you haven't installed Tailwind CSS yet, you can add it as follows:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

2. Create an SCSS File

Create an SCSS file where you can write your styles. For example, styles.scss:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// Your custom SCSS
$primary-color: #4caf50;

body {
  background-color: $primary-color;
}

3. Configure SCSS in Your Build System

Depending on your project setup, you'll need to configure your build tool to compile SCSS. If you're using Webpack, add a rule for SCSS files in webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
}

4. Import SCSS File

In your main JavaScript or TypeScript file, import the SCSS file to apply your styles:

import './styles.scss'

5. Tailwind JIT Mode (Optional but Recommended)

Enable Just-In-Time (JIT) mode in your tailwind.config.js for faster builds:

module.exports = {
  mode: 'jit',
  content: ['./src/**/*.{html,js}'],
}

Why Use SCSS with Tailwind CSS?

While Tailwind CSS is highly effective for utility-first styling, SCSS allows you to:

Define reusable variables (e.g., colors, font sizes).
Use nesting for cleaner, more maintainable code.
Create mixins for repetitive tasks.

Combining both gives you the best of both worlds—utility classes for quick styling and SCSS for advanced customizations.

FAQs

Q1: Do I really need SCSS with Tailwind CSS?

Not necessarily. Tailwind CSS is designed to eliminate the need for traditional CSS preprocessors like SCSS. However, if you're working on a complex project or have existing SCSS files, integrating SCSS can be helpful.

Q2: Can I use Tailwind's `@apply` directive in SCSS?

Yes, you can use @apply to include Tailwind's utility classes in your SCSS files. For example:

.button {
  @apply rounded bg-blue-500 px-4 py-2 text-white;
}

Q3: Are there pre-built components for Tailwind CSS?

Yes, libraries like Tailwind UI and ShadCN offer pre-built components. However, some of these are paid.