Skip to content
A javascript free implementation of TailwindCSS for Sass.
CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE.md
README.md
base.scss
components.scss
package-lock.json
package.json
sasswind.scss
utilities.scss

README.md

Sasswind SCSS

Sasswind is a javascript free port of tailwindcss, written entirely in Sass. It is currently based on v1.1 of tailwindcss.

Installation

The easist way to install Sasswind is via NPM or YARN.

NPM

npm install sasswind

Yarn

yarn add sasswind

Upon installing, include the following in your main Sass file.

@import "sasswind/sasswind";

Alternatively, you can add each module implicitly with the following. This will allow you to add your custom styles wherever you like within the final stylesheet.

@import "sasswind/base";

@import "sasswind/components";

@import "sasswind/utilities";

Configuration

Sasswind can be heavily customised by creating a configuration map before importing the sasswind modules. This map mirrors the structure of tailwindcss' javascript configuration object. Almost all of Sasswind's configuration options are set in the same way as tailwindcss. You can see the full details of tailwindcss' configuration here.

The user config and default config will be merged during the compilation stage. Please note that, as with tailwindcss, this is not a deep merge.

If you would like to add to the values in the theme, add them to the extend map, not the top level theme map as any map in the theme will overwrite the defaults, not add to them. I advise you to consult the tailwindcss configuration docs for a full understanding of what each section affects.

The only major difference with the config is with the corePlugins. Setting this value to a boolean will either load all core plugins (true) or none at all (false). You can also set a whitelist of plugins to load by passing a list or a blacklist by passing a map with the plugin name as key and false as the value.

The user config map

$config: (
  prefix: "",
  important: false,
  separator: ":",
  theme: (
      extend: ()
  ),
  corePlugins: true,
  variants: ()
);

The default config map used by Sasswind

$defaultConfig: (
  prefix: "",
  important: false,
  separator: ":",
  theme: (
    screens: (
      "sm": "640px",
      "md": "768px",
      "lg": "1024px",
      "xl": "1280px"
    ),
    colors: (
        "transparent": "transparent",
        "black": "#000",
        "white": "#fff",
        "gray": (
            "100": "#f7fafc",
            "200": "#edf2f7",
            "300": "#e2e8f0",
            "400": "#cbd5e0",
            "500": "#a0aec0",
            "600": "#718096",
            "700": "#4a5568",
            "800": "#2d3748",
            "900": "#1a202c"
        ),
        "red": (
            "100": "#fff5f5",
            "200": "#fed7d7",
            "300": "#feb2b2",
            "400": "#fc8181",
            "500": "#f56565",
            "600": "#e53e3e",
            "700": "#c53030",
            "800": "#9b2c2c",
            "900": "#742a2a"
        ),
        "orange": (
            "100": "#fffaf0",
            "200": "#feebc8",
            "300": "#fbd38d",
            "400": "#f6ad55",
            "500": "#ed8936",
            "600": "#dd6b20",
            "700": "#c05621",
            "800": "#9c4221",
            "900": "#7b341e"
        ),
        "yellow": (
            "100": "#fffff0",
            "200": "#fefcbf",
            "300": "#faf089",
            "400": "#f6e05e",
            "500": "#ecc94b",
            "600": "#d69e2e",
            "700": "#b7791f",
            "800": "#975a16",
            "900": "#744210"
        ),
        "green": (
            "100": "#f0fff4",
            "200": "#c6f6d5",
            "300": "#9ae6b4",
            "400": "#68d391",
            "500": "#48bb78",
            "600": "#38a169",
            "700": "#2f855a",
            "800": "#276749",
            "900": "#22543d"
        ),
        "teal": (
            "100": "#e6fffa",
            "200": "#b2f5ea",
            "300": "#81e6d9",
            "400": "#4fd1c5",
            "500": "#38b2ac",
            "600": "#319795",
            "700": "#2c7a7b",
            "800": "#285e61",
            "900": "#234e52"
        ),
        "blue": (
            "100": "#ebf8ff",
            "200": "#bee3f8",
            "300": "#90cdf4",
            "400": "#63b3ed",
            "500": "#4299e1",
            "600": "#3182ce",
            "700": "#2b6cb0",
            "800": "#2c5282",
            "900": "#2a4365"
        ),
        "indigo": (
            "100": "#ebf4ff",
            "200": "#c3dafe",
            "300": "#a3bffa",
            "400": "#7f9cf5",
            "500": "#667eea",
            "600": "#5a67d8",
            "700": "#4c51bf",
            "800": "#434190",
            "900": "#3c366b"
        ),
        "purple": (
            "100": "#faf5ff",
            "200": "#e9d8fd",
            "300": "#d6bcfa",
            "400": "#b794f4",
            "500": "#9f7aea",
            "600": "#805ad5",
            "700": "#6b46c1",
            "800": "#553c9a",
            "900": "#44337a"
        ),
        "pink": (
            "100": "#fff5f7",
            "200": "#fed7e2",
            "300": "#fbb6ce",
            "400": "#f687b3",
            "500": "#ed64a6",
            "600": "#d53f8c",
            "700": "#b83280",
            "800": "#97266d",
            "900": "#702459"
        )
    ),
    spacing: (
      "px": "1px",
      "0": "0",
      "1": "0.25rem",
      "2": "0.5rem",
      "3": "0.75rem",
      "4": "1rem",
      "5": "1.25rem",
      "6": "1.5rem",
      "8": "2rem",
      "10": "2.5rem",
      "12": "3rem",
      "16": "4rem",
      "20": "5rem",
      "24": "6rem",
      "32": "8rem",
      "40": "10rem",
      "48": "12rem",
      "56": "14rem",
      "64": "16rem"
    ),
    backgroundColor: (
        "transparent": "transparent",
        "black": "#000",
        "white": "#fff",
        "gray": (
            "100": "#f7fafc",
            "200": "#edf2f7",
            "300": "#e2e8f0",
            "400": "#cbd5e0",
            "500": "#a0aec0",
            "600": "#718096",
            "700": "#4a5568",
            "800": "#2d3748",
            "900": "#1a202c"
        ),
        "red": (
            "100": "#fff5f5",
            "200": "#fed7d7",
            "300": "#feb2b2",
            "400": "#fc8181",
            "500": "#f56565",
            "600": "#e53e3e",
            "700": "#c53030",
            "800": "#9b2c2c",
            "900": "#742a2a"
        ),
        "orange": (
            "100": "#fffaf0",
            "200": "#feebc8",
            "300": "#fbd38d",
            "400": "#f6ad55",
            "500": "#ed8936",
            "600": "#dd6b20",
            "700": "#c05621",
            "800": "#9c4221",
            "900": "#7b341e"
        ),
        "yellow": (
            "100": "#fffff0",
            "200": "#fefcbf",
            "300": "#faf089",
            "400": "#f6e05e",
            "500": "#ecc94b",
            "600": "#d69e2e",
            "700": "#b7791f",
            "800": "#975a16",
            "900": "#744210"
        ),
        "green": (
            "100": "#f0fff4",
            "200": "#c6f6d5",
            "300": "#9ae6b4",
            "400": "#68d391",
            "500": "#48bb78",
            "600": "#38a169",
            "700": "#2f855a",
            "800": "#276749",
            "900": "#22543d"
        ),
        "teal": (
            "100": "#e6fffa",
            "200": "#b2f5ea",
            "300": "#81e6d9",
            "400": "#4fd1c5",
            "500": "#38b2ac",
            "600": "#319795",
            "700": "#2c7a7b",
            "800": "#285e61",
            "900": "#234e52"
        ),
        "blue": (
            "100": "#ebf8ff",
            "200": "#bee3f8",
            "300": "#90cdf4",
            "400": "#63b3ed",
            "500": "#4299e1",
            "600": "#3182ce",
            "700": "#2b6cb0",
            "800": "#2c5282",
            "900": "#2a4365"
        ),
        "indigo": (
            "100": "#ebf4ff",
            "200": "#c3dafe",
            "300": "#a3bffa",
            "400": "#7f9cf5",
            "500": "#667eea",
            "600": "#5a67d8",
            "700": "#4c51bf",
            "800": "#434190",
            "900": "#3c366b"
        ),
        "purple": (
            "100": "#faf5ff",
            "200": "#e9d8fd",
            "300": "#d6bcfa",
            "400": "#b794f4",
            "500": "#9f7aea",
            "600": "#805ad5",
            "700": "#6b46c1",
            "800": "#553c9a",
            "900": "#44337a"
        ),
        "pink": (
            "100": "#fff5f7",
            "200": "#fed7e2",
            "300": "#fbb6ce",
            "400": "#f687b3",
            "500": "#ed64a6",
            "600": "#d53f8c",
            "700": "#b83280",
            "800": "#97266d",
            "900": "#702459"
        )
    ),
    backgroundPosition: (
      "bottom": "bottom",
      "center": "center",
      "left": "left",
      "left-bottom": "left bottom",
      "left-top": "left top",
      "right": "right",
      "right-bottom": "right bottom",
      "right-top": "right top",
      "top": "top"
    ),
    backgroundSize: (
      "auto": "auto",
      "cover": "cover",
      "contain": "contain"
    ),
    borderColor: (
      "default": "#e2e8f0"
    ),
    borderRadius: (
      "none": "0",
      "sm": "0.125rem",
      "default": "0.25rem",
      "lg": "0.5rem",
      "full": "9999px"
    ),
    borderWidth: (
      "default": "1px",
      "0": "0",
      "2": "2px",
      "4": "4px",
      "8": "8px"
    ),
    boxShadow: (
      "default":
        "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
      "md":
        "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
      "lg":
        "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
      "xl":
        "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
      "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
      "inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
      "outline": "0 0 0 3px rgba(66, 153, 225, 0.5)",
      "none": "none"
    ),
    container: (
      "center": false,
      "padding": false
    ),
    cursor: (
      "auto": "auto",
      "default": "default",
      "pointer": "pointer",
      "wait": "wait",
      "text": "text",
      "move": "move",
      "not-allowed": "not-allowed"
    ),
    fill: (
      "current": "currentColor"
    ),
    flex: (
      "1": "1 1 0%",
      "auto": "1 1 auto",
      "initial": "0 1 auto",
      "none": "none"
    ),
    flexGrow: (
      "0": "0",
      "default": "1"
    ),
    flexShrink: (
      "0": "0",
      "default": "1"
    ),
    fontFamily: (
      "sans": [ "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      '"Noto Sans"',
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
      '"Noto Color Emoji"',
      ],
      "serif": [ "Georgia",
      "Cambria",
      '"Times New Roman"',
      "Times",
      "serif",
      ],
      "mono": [ "Menlo",
      "Monaco",
      "Consolas",
      '"Liberation Mono"',
      '"Courier New"',
      "monospace",
      ]
    ),
    fontSize: (
      "xs": "0.75rem",
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem",
      "xl": "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "4rem"
    ),
    fontWeight: (
      "hairline": "100",
      "thin": "200",
      "light": "300",
      "normal": "400",
      "medium": "500",
      "semibold": "600",
      "bold": "700",
      "extrabold": "800",
      "black": "900"
    ),
    height: (
      "auto": "auto",
      "full": "100%",
      "screen": "100vh"
    ),
    inset: (
      "0": "0",
      "auto": "auto"
    ),
    letterSpacing: (
      "tighter": "-0.05em",
      "tight": "-0.025em",
      "normal": "0",
      "wide": "0.025em",
      "wider": "0.05em",
      "widest": "0.1em"
    ),
    lineHeight: (
      "none": "1",
      "tight": "1.25",
      "snug": "1.375",
      "normal": "1.5",
      "relaxed": "1.625",
      "loose": "2"
    ),
    listStyleType: (
      "none": "none",
      "disc": "disc",
      "decimal": "decimal"
    ),
    margin: (
      "auto": "auto"
    ),
    maxHeight: (
      "full": "100%",
      "screen": "100vh"
    ),
    maxWidth: (
      "xs": "20rem",
      "sm": "24rem",
      "md": "28rem",
      "lg": "32rem",
      "xl": "36rem",
      "2xl": "42rem",
      "3xl": "48rem",
      "4xl": "56rem",
      "5xl": "64rem",
      "6xl": "72rem",
      "full": "100%"
    ),
    minHeight: (
      "0": "0",
      "full": "100%",
      "screen": "100vh"
    ),
    minWidth: (
      "0": "0",
      "full": "100%"
    ),
    objectPosition: (
      "bottom": "bottom",
      "center": "center",
      "left": "left",
      "left-bottom": "left bottom",
      "left-top": "left top",
      "right": "right",
      "right-bottom": "right bottom",
      "right-top": "right top",
      "top": "top"
    ),
    opacity: (
      "0": "0",
      "25": "0.25",
      "50": "0.5",
      "75": "0.75",
      "100": "1"
    ),
    order: (
      "first": "-9999",
      "last": "9999",
      "none": "0",
      "1": "1",
      "2": "2",
      "3": "3",
      "4": "4",
      "5": "5",
      "6": "6",
      "7": "7",
      "8": "8",
      "9": "9",
      "10": "10",
      "11": "11",
      "12": "12"
    ),
    padding: (),
    placeholderColor: (),
    stroke: (
      "current": "currentColor"
    ),
    textColor: (),
    width: (
      "auto": "auto",
      "1/2": "50%",
      "1/3": "33.333333%",
      "2/3": "66.666667%",
      "1/4": "25%",
      "2/4": "50%",
      "3/4": "75%",
      "1/5": "20%",
      "2/5": "40%",
      "3/5": "60%",
      "4/5": "80%",
      "1/6": "16.666667%",
      "2/6": "33.333333%",
      "3/6": "50%",
      "4/6": "66.666667%",
      "5/6": "83.333333%",
      "1/12": "8.333333%",
      "2/12": "16.666667%",
      "3/12": "25%",
      "4/12": "33.333333%",
      "5/12": "41.666667%",
      "6/12": "50%",
      "7/12": "58.333333%",
      "8/12": "66.666667%",
      "9/12": "75%",
      "10/12": "83.333333%",
      "11/12": "91.666667%",
      "full": "100%",
      "screen": "100vw"
    ),
    zIndex: (
      "auto": "auto",
      "0": "0",
      "10": "10",
      "20": "20",
      "30": "30",
      "40": "40",
      "50": "50"
    )
  ),
  corePlugins: true,
  variants: (
    accessibility: [ "responsive",
    "focus" ],
    alignContent: [ "responsive" ],
    alignItems: [ "responsive" ],
    alignSelf: [ "responsive" ],
    appearance: [ "responsive" ],
    backgroundAttachment: [ "responsive" ],
    backgroundColor: [ "responsive",
    "hover",
    "focus" ],
    backgroundPosition: [ "responsive" ],
    backgroundRepeat: [ "responsive" ],
    backgroundSize: [ "responsive" ],
    borderCollapse: [ "responsive" ],
    borderColor: [ "responsive",
    "hover",
    "focus" ],
    borderRadius: [ "responsive" ],
    borderStyle: [ "responsive" ],
    borderWidth: [ "responsive" ],
    boxShadow: [ "responsive",
    "hover",
    "focus" ],
    cursor: [ "responsive" ],
    display: [ "responsive" ],
    fill: [ "responsive" ],
    flex: [ "responsive" ],
    flexDirection: [ "responsive" ],
    flexGrow: [ "responsive" ],
    flexShrink: [ "responsive" ],
    flexWrap: [ "responsive" ],
    float: [ "responsive" ],
    fontFamily: [ "responsive" ],
    fontSize: [ "responsive" ],
    fontSmoothing: [ "responsive" ],
    fontStyle: [ "responsive" ],
    fontWeight: [ "responsive",
    "hover",
    "focus" ],
    height: [ "responsive" ],
    inset: [ "responsive" ],
    justifyContent: [ "responsive" ],
    letterSpacing: [ "responsive" ],
    lineHeight: [ "responsive" ],
    listStylePosition: [ "responsive" ],
    listStyleType: [ "responsive" ],
    margin: [ "responsive" ],
    maxHeight: [ "responsive" ],
    maxWidth: [ "responsive" ],
    minHeight: [ "responsive" ],
    minWidth: [ "responsive" ],
    objectFit: [ "responsive" ],
    objectPosition: [ "responsive" ],
    opacity: [ "responsive",
    "hover",
    "focus" ],
    order: [ "responsive" ],
    outline: [ "responsive",
    "focus" ],
    overflow: [ "responsive" ],
    padding: [ "responsive" ],
    placeholderColor: [ "responsive",
    "focus" ],
    pointerEvents: [ "responsive" ],
    position: [ "responsive" ],
    resize: [ "responsive" ],
    stroke: [ "responsive" ],
    tableLayout: [ "responsive" ],
    textAlign: [ "responsive" ],
    textColor: [ "responsive",
    "hover",
    "focus" ],
    textDecoration: [ "responsive",
    "hover",
    "focus" ],
    textTransform: [ "responsive" ],
    userSelect: [ "responsive" ],
    verticalAlign: [ "responsive" ],
    visibility: [ "responsive" ],
    whitespace: [ "responsive" ],
    width: [ "responsive" ],
    wordBreak: [ "responsive" ],
    zIndex: [ "responsive" ]
  )
);

Usage

General usage is identical to tailwindcss. All of the default utility and component classes are available out of the box.

Helpers

Sasswind includes a few helper mixins and functions.

Mixins

screen($screen) Adds a media query for the passed screen size.

@include screen(sm) {
    // your code goes here
}

apply($classes) Applies the given classes to the enclosing class or id. The same restrictions apply here as in tailwindcss. No responsive or variant classes can be added.

.yourclass {
  @include apply(mb-4 bg-gray-400);
}

Functions

config($target) can be used to access values in the config file. It uses a dot notation to access nested values.

$blue: config("theme.colors.blue.500");

theme($target) is a convenience method for theme values in the config. Again, it uses a dot notation to access nested values.

$blue: theme("colors.blue.500");

File size

As with tailwindcss, the generated file size is huge. I strongly suggest that you follow the advice given here, particularly in regards to getting PurgeCSS set up and running on your production builds.

Limitations

Currently, the following pseudo element variants are unsupported.

  • first-child
  • last-child
  • odd-child
  • even-child
  • group-hover

User defined plugins are not yet supported but will be coming soon.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

You can’t perform that action at this time.