{"id":15041500,"url":"https://github.com/rahmanda/tailwindscss","last_synced_at":"2025-07-02T13:37:24.318Z","repository":{"id":45978419,"uuid":"187334383","full_name":"rahmanda/tailwindscss","owner":"rahmanda","description":"SCSS version of Tailwind CSS for people who don't use modern module bundlers","archived":false,"fork":false,"pushed_at":"2023-01-03T22:03:25.000Z","size":1081,"stargazers_count":25,"open_issues_count":14,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T20:26:58.438Z","etag":null,"topics":["scss","scss-framework","tailwindcss","utility-classes"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rahmanda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-18T08:38:25.000Z","updated_at":"2025-03-20T10:49:28.000Z","dependencies_parsed_at":"2023-02-01T11:02:05.344Z","dependency_job_id":null,"html_url":"https://github.com/rahmanda/tailwindscss","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rahmanda/tailwindscss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahmanda%2Ftailwindscss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahmanda%2Ftailwindscss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahmanda%2Ftailwindscss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahmanda%2Ftailwindscss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rahmanda","download_url":"https://codeload.github.com/rahmanda/tailwindscss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rahmanda%2Ftailwindscss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263148909,"owners_count":23421276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["scss","scss-framework","tailwindcss","utility-classes"],"created_at":"2024-09-24T20:46:10.298Z","updated_at":"2025-07-02T13:37:24.264Z","avatar_url":"https://github.com/rahmanda.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/rahmanda/tailwindscss.svg?branch=master)](https://travis-ci.org/rahmanda/tailwindscss)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n[![npm version](https://badge.fury.io/js/tailwindscss.svg)](https://badge.fury.io/js/tailwindscss)\n\n# Tailwind SCSS\n\nSCSS version of Tailwind CSS for people who don't use modern module bundler.\n\n## Why??\n\nThe original Tailwind CSS use PostCSS for its CSS preprocessor. Therefore, we have to use Node.js module bundler (Webpack, Rollup etc) in order to get fully control over Tailwind's customization. Unfortunately, there are many cases (mainly on legacy apps) where we couldn't use Node.js and I don't want this issue to prevent us from using Tailwind CSS.\n\nBy using SCSS format, I hope that more people especially who have non Node.js apps can start using Tailwind CSS and progressively improve their tech stack to use the original version eventually.\n\nWe try to keep this library as close as possible with future development of Tailwind CSS.\n\n## Installation\n\nUsing npm:\n\n```\nnpm install tailwindscss --save\n```\n\nor yarn:\n\n```\nyarn add tailwindscss\n```\n\n## Usage\n\nTo use it on your SCSS, you can import entire style like this:\n\n``` scss\n@import \"tailwindscss\";\n```\n\nor you can choose to import one by one:\n\n``` scss\n@import \"tailwindscss/base\";\n@import \"tailwindscss/utilities\";\n```\n\n## Configuration\n\nBy default, it will generate all styles which are equivalent to Tailwind CSS's default configuration. Below is what our configuration looks like.\n\n``` scss\n@import 'tailwindscss/src/helper';\n\n$prefix: ''; // Selector prefix;\n$separator: '_'; // Separator for pseudo-class and media query modifier\n\n$theme-colors: (\n  transparent: transparent,\n  black: #000,\n); // Theme configuration\n\n$variants-text-color: (responsive, hover, focus); // Variants configuration\n\n$core-plugins-text-color: true; // Set false to disable utility\n```\n\nTo customize utilities, you need to import your own configuration file at the top of your SCSS file.\n\n``` scss\n@import \"path-to/tailwind.config.scss\";\n@import \"tailwindscss/base\";\n@import \"tailwindscss/utilities\";\n```\n\nFor starting out, you can run `npx tailwindscss init` to get full configuration.\n\nNote: You need to configure how your bundler can refer to tailwindscss node_modules yourself.\n\n## Documentation\n\nHead over to [the original website](https://tailwindcss.com) for more guideline about utilities. Of course, some sections like installation are not applicable for this library.\n\n## Limitation\n\nBecause of SCSS limitation, below features cannot be provided in this library:\n\n- [Plugins](https://tailwindcss.com/docs/plugins)\n- [Functions \u0026 Directives](https://tailwindcss.com/docs/functions-and-directives)\n\nSCSS does not support several characters like colon (`:`) and backslash (`/`) because it will always be evaluated as language's keywords. For your safety, keep your prefix and separator with dashes (`-`) and underscore (`_`) characters.\n\n## TODO\n\n- [ ] important flag\n- [x] responsive\n- [x] pseudo-class (hover, focus, focus-within, active and group-hover)\n- [x] colors\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frahmanda%2Ftailwindscss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frahmanda%2Ftailwindscss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frahmanda%2Ftailwindscss/lists"}