It's possible to configure modules with @use ... with or a mixin can be created to set the variables.

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

TailwindCSS v4

Starting from TailwindCSS v4, support for preprocessors has been discontinued, meaning that SASS can no longer be used with it from v4 onwards.

• Compatibility
• Deprecated: Sass, Less and Stylus preprocessors support
• tailwindlabs/tailwindcss #15716 by RobinMalfait:
  Migration tool doesn't recognize .scss files

TailwindCSS v4 and Sass (works, but independently of each other)

You can use TailwindCSS and Sass side by side separately. Create a tailwind.css file (important: not an .scss file) with content related only to TailwindCSS, for example:

@import "tailwindcss";

Then reference this new file in your styles.scss like this in ./scss/main.scss:

@use "custom.scss";

$primary: #42b883;

body {
  background: $primary;
}

You need to include styles.scss and tailwind.css as separate files in the project. They must not interact with each other or be nested into one another.

main.ts

import "./main.scss";
import "./tailwind.css";

• tailwindlabs/tailwindcss discussion #18364: Support Angular SCSS with TailwindCSS v4
• How to use @apply in Tailwind v4?

Note: So officially it's not supported and cannot be used together directly, but they can be used side by side. Keep in mind that compatibility issues between TailwindCSS and these preprocessors will not be a priority in the future.

Related:

• Angular not detecting changes in .scss files
• @import "tailwindcss"; does not work when used in a file with an .scss extension

Extra: open source template

I put together an open-source template. It's difficult to implement directly in a Stack Overflow answer, but it can serve as a useful learning example for using TailwindCSS and Sass in the same project, including both global CSS, CSS modules, and style blocks.

• Template: Vite (with TypeScript) + Sass + TailwindCSS v4

From React 17

To access your scss variables into the react component, you need to do something like that

1. Install node-sass as a dependency or dev dependency
2. No need to do any config change in webpack
3. import as a module <-- main point

variables.module.scss

$color: skyblue;
$primaryColor: red;

:export {
    color: $color;
    primary-color: $primaryColor;
}

App.js

import variables from '<YOUR_PATH>/variables.module.scss';

const App = () => {
    console.log(variables);
}