{"id":14957,"library":"tailwindscss","title":"Tailwind SCSS","description":"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.","status":"abandoned","version":"0.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/rahmanda/tailwindscss","tags":["javascript","tailwindcss","scss","scss-framework","utility-classes"],"install":[{"cmd":"npm install tailwindscss","lang":"bash","label":"npm"},{"cmd":"yarn add tailwindscss","lang":"bash","label":"yarn"},{"cmd":"pnpm add tailwindscss","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package provides SCSS files. All usage is via SCSS `@import` statements, not JavaScript `import` or CommonJS `require`.","wrong":"import { utilityClasses } from 'tailwindscss';","symbol":"Entire Tailwindscss styles","correct":"@import \"tailwindscss\";"},{"note":"Allows granular import of specific Tailwindscss sections, often used alongside `utilities`.","symbol":"Base styles","correct":"@import \"tailwindscss/base\";"},{"note":"Allows granular import of specific Tailwindscss sections, often used alongside `base` and a custom config.","symbol":"Utility styles","correct":"@import \"tailwindscss/utilities\";"},{"note":"Your custom configuration (e.g., `$theme-colors`, `$prefix`) must be imported before `base` or `utilities` to take effect.","symbol":"Custom configuration","correct":"@import \"path-to/tailwind.config.scss\";"}],"quickstart":{"code":"npm install tailwindscss --save\n\n# Or using yarn:\nyarn add tailwindscss\n\n# Initialize a configuration file (optional, but recommended for customization)\nnpx tailwindscss init\n\n// tailwind.config.scss (generated or custom)\n$prefix: '';\n$separator: '_';\n\n$theme-colors: (\n  transparent: transparent,\n  black: #000,\n  white: #fff,\n  primary: #3490dc,\n  secondary: #6cb2eb\n);\n\n$variants-text-color: (responsive, hover, focus);\n$core-plugins-text-color: true;\n\n// style.scss (your main SCSS file)\n@import \"path-to/tailwind.config.scss\"; // Import your config FIRST\n@import \"tailwindscss/base\";\n@import \"tailwindscss/utilities\";\n\nbody {\n  @apply bg-primary text-white p-4;\n}\n\n.my-button {\n  @apply bg-secondary hover_bg-primary text-white font-bold py-2 px-4 rounded;\n}","lang":"scss","description":"Demonstrates installation, generating a configuration file, defining custom SCSS variables for configuration, and importing Tailwindscss in a main SCSS file, then applying utilities."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Plugins cannot be used. Custom styles must be written directly in SCSS. For advanced features, the official Tailwind CSS is required.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Understand that the SCSS version has inherent limitations. If full directive support is critical, migrate to the official Tailwind CSS.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change the value of `$prefix` or `$separator` in your `tailwind.config.scss` to use only SCSS-safe characters like dashes (`-`) or underscores (`_`).","cause":"Using an invalid character like `:` in an SCSS variable value that expects a simple identifier, particularly for `$prefix` or `$separator`.","error":"Error: SASS compilation failed: Invalid CSS after \"$\": expected expression (e.g. 1px, bold), was \":\""},{"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.","cause":"Attempting to import `tailwindscss` using JavaScript `import` or `require`, or incorrect `@import` path in SCSS.","error":"Module not found: Can't resolve 'tailwindscss' in '...' OR Failed to compile: Can't find stylesheet to import."}],"ecosystem":"npm"}