Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

tailwindscss

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwindscss

SCSS version of Tailwind CSS for people who don't use modern module bundler

  • 0.2.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
622
increased by32.34%
Maintainers
1
Weekly downloads
 
Created
Source

Tailwind SCSS

SCSS version of Tailwind CSS for people who don't use modern module bundler.

Why??

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

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

We try to keep this library as close as possible with future development of Tailwind CSS.

Installation

Using npm:

npm install tailwindscss --save

or yarn:

yarn add tailwindscss

Usage

To use it on your SCSS, you can import entire style like this:

@import "tailwindscss";

or you can choose to import one by one:

@import "tailwindscss/base";
@import "tailwindscss/utilities";

Configuration

By default, it will generate all styles which are equivalent to Tailwind CSS's default configuration. Below is what our configuration looks like.


@import 'tailwindscss/src/helper';

$prefix: ''; // Selector prefix;
$separator: '_'; // Separator for pseudo-class and media query modifier

$theme-colors: (
  transparent: transparent,
  black: #000,
); // Theme configuration

$variants-text-color: (responsive, hover, focus); // Variants configuration

$core-plugins-text-color: true; // Set false to disable utility

To customize utilities, you need to import your own configuration file at the top of your SCSS file.

@import "path-to/tailwindscss.config.scss";
@import "tailwindscss/base";
@import "tailwindscss/utilities";

For starting out, you can run npx tailwindscss init to get full configuration.

Documentation

Head to the original website for more guideline about utilities. Of course, some sections like installation are not applicable for this library.

Limitation

Because of Sass limitation, below features cannot be provided in this library:

Sass do not support several characters like ':' and '/' because it will always be evaluated as language's keywords. For your safety, keep your prefix and separator with dashed ('-') and underscored ('_') characters.

TODO

  • important flag
  • responsive
  • pseudo-class (hover and focus)
  • colors

Keywords

FAQs

Package last updated on 21 May 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc