tailwindscss

library0.3.0jsnpmunverified

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.

web-framework

npm install tailwindscss

github ↗package ↗

INSTALL

IMPORT

SIG · TAILWINDSCSS

tailwindscss

web-frameworkjavascriptv0.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Entire Tailwindscss styles

✓ @import "tailwindscss";

✗ import { utilityClasses } from '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.

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; }

Debug

Known issues

breakingThe `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.

affects: >=0.3.0

gotchaThis 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.

affects: >=0.1.0

gotchaDue 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.

affects: >=0.1.0

gotchaSCSS 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.

affects: >=0.1.0

Errors

Common errors & fixes

Error: SASS compilation failed: Invalid CSS after "$": expected expression (e.g. 1px, bold), was ":"

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.

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.

Upgrade

Version history

0.3.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/rahmanda/tailwindscss ↗

packagehttps://www.npmjs.com/package/tailwindscss ↗