Tailwind SCSS

0.3.0 · abandoned · verified Sun Apr 19

Tailwind SCSS (npm package `tailwindscss`) is an independent reimplementation of the Tailwind CSS utility-first framework using pure SCSS. It was designed for projects that cannot or choose not to use Node.js-based module bundlers like Webpack or Rollup, which are typically required for PostCSS processing in the original Tailwind CSS. Its primary purpose was to allow integration of Tailwind CSS principles into legacy applications or environments where a traditional SCSS compilation pipeline is preferred. The current stable version is 0.3.0, released in 2020. This project is currently unmaintained and effectively abandoned. A key differentiator is its complete SCSS-based architecture, eliminating the need for PostCSS and associated build tooling, making it suitable for direct inclusion and compilation with any standard SCSS compiler. However, this comes with significant limitations, as it cannot support Tailwind CSS plugins, functions, or directives, and its configuration is done via SCSS variables rather than JavaScript objects.

Common errors

```
Error: SASS compilation failed: Invalid CSS after "$": expected expression (e.g. 1px, bold), was ":"
```
cause Using an invalid character like `:` in an SCSS variable value that expects a simple identifier, particularly for `$prefix` or `$separator`.

fix Change the value of `$prefix` or `$separator` in your `tailwind.config.scss` to use only SCSS-safe characters like dashes (`-`) or underscores (`_`).
```
Module not found: Can't resolve 'tailwindscss' in '...' OR Failed to compile: Can't find stylesheet to import.
```
cause Attempting to import `tailwindscss` using JavaScript `import` or `require`, or incorrect `@import` path in SCSS.

fix Ensure you are using SCSS `@import "tailwindscss";` syntax in an SCSS file and that `node_modules` is included in your SCSS compiler's include paths. This package provides SCSS files, not JavaScript modules.

Warnings

breaking The `tailwindscss` project has been abandoned since its last update in June 2020. This means it will not receive updates for new Tailwind CSS features, bug fixes, or security patches, making it unsuitable for new projects or those requiring modern compatibility.
Fix: Migrate to the official Tailwind CSS library and use a Node.js-based build setup (e.g., PostCSS with Webpack, Rollup, Vite, or Parcel) for full functionality and ongoing support.
gotcha This SCSS implementation of Tailwind CSS does not support Tailwind's plugin system. Functionality that relies on plugins (e.g., custom components, added variants) will not work.
Fix: Plugins cannot be used. Custom styles must be written directly in SCSS. For advanced features, the official Tailwind CSS is required.
gotcha Due to SCSS limitations, Tailwindscss cannot implement Tailwind CSS functions or directives (like `@apply`, `@screen`, `@variants` directly within the utility definition itself). While `@apply` can be used in your custom SCSS, direct usage of Tailwind's core functions/directives within the framework is absent.
Fix: Understand that the SCSS version has inherent limitations. If full directive support is critical, migrate to the official Tailwind CSS.
gotcha SCSS does not allow certain characters (like colon `:` or forward slash `/`) in variable names or mixin arguments without special escaping, which affects configuration. Users must avoid these characters in `$prefix` and `$separator` variables.
Fix: Ensure `$prefix` and `$separator` variables use only valid SCSS identifier characters, such as dashes (`-`) or underscores (`_`). For example, `$separator: '_';` is safe, but `$separator: ':';` will cause compilation errors.

Install

npm install tailwindscss npm
yarn add tailwindscss yarn
pnpm add tailwindscss pnpm

Imports

Entire Tailwindscss styles
wrong:
```
import { utilityClasses } from 'tailwindscss';
```
correct:
```
@import "tailwindscss";
```
This package provides SCSS files. All usage is via SCSS `@import` statements, not JavaScript `import` or CommonJS `require`.
Base styles
```
@import "tailwindscss/base";
```
Allows granular import of specific Tailwindscss sections, often used alongside `utilities`.
Utility styles
```
@import "tailwindscss/utilities";
```
Allows granular import of specific Tailwindscss sections, often used alongside `base` and a custom config.
Custom configuration
```
@import "path-to/tailwind.config.scss";
```
Your custom configuration (e.g., `$theme-colors`, `$prefix`) must be imported before `base` or `utilities` to take effect.

Quickstart

Demonstrates installation, generating a configuration file, defining custom SCSS variables for configuration, and importing Tailwindscss in a main SCSS file, then applying utilities.

npm install tailwindscss --save

# Or using yarn:
yarn add tailwindscss

# Initialize a configuration file (optional, but recommended for customization)
npx tailwindscss init

// tailwind.config.scss (generated or custom)
$prefix: '';
$separator: '_';

$theme-colors: (
  transparent: transparent,
  black: #000,
  white: #fff,
  primary: #3490dc,
  secondary: #6cb2eb
);

$variants-text-color: (responsive, hover, focus);
$core-plugins-text-color: true;

// style.scss (your main SCSS file)
@import "path-to/tailwind.config.scss"; // Import your config FIRST
@import "tailwindscss/base";
@import "tailwindscss/utilities";

body {
  @apply bg-primary text-white p-4;
}

.my-button {
  @apply bg-secondary hover_bg-primary text-white font-bold py-2 px-4 rounded;
}

view raw JSON →