A better TailwindCSS bridge to SASS.

This plugin provides you with a set of SASS functions and mixins that makes working with Tailwind easier in SASS. Here's quick example:

// tailwind.config.js

module.exports = {
    // ...
    theme: {
        colors: {
            indigo: {
                100: '#ebf4ff',
                200: '#c3dafe',
                300: '#a3bffa',
                400: '#7f9cf5',
                500: '#667eea',
                600: '#5a67d8',
                700: '#4c51bf',
                800: '#434190',
                900: '#3c366b',
            },
        },
        borderRadius: {
            none: '0',
            sm: '0.125rem',
            default: '0.25rem',
            md: '0.375rem',
            lg: '0.5rem',
            xl: '0.75rem',
            '2xl': '1rem',
            '3xl': '1.5rem',
            full: '9999px',
        }
    },
    // ...
};

// _btn.scss

.btn {
    border-radius: rounded(lg);
    background-color: color('indigo.500'); // - or - color(indigo, 500)
}

/* app.css */

.btn {
    border-radius: 0.5rem;
    background-color: #667eea;
}

The plugin receives the entire Tailwind config as a JavaScript object and converts it into a SASS map that is then exported to a defined path whithin your project. Along side the generated config, a few SASS functions and mixins are also exported (unless disabled) to make retrieving the config values easier.

Install the plugin via NPM (or yarn):

# Using npm
npm i @vicgutt/tailwindsass

# Using Yarn
yarn add @vicgutt/tailwindsass

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('@vicgutt/tailwindsass')({
            // base: './resources/sass/app.scss',
            dist: './resources/sass',
        }),
        // ...
    ],
};

Some config options may be passed to the plugin to change or disable a behaviour.

A few SASS functions and mixins are provided and are meant as direct TailwindCSS utilities equivalant. Therefore the terminologie and behaviour are similar to there utility counterpart.

Use the config() function to access your Tailwind config's values using dot notation. It allows you to reference a value from your entire configuration.

Source

.my-class {
    @if config('important') {
        background-color: color('indigo.500')!important;
    } @else {
        background-color: color('indigo.500');
    }
}

Use the theme() function to access your Tailwind config's theme values using dot notation. It allowes you to reference a value from your theme configuration.

It's a shortcurt to config('theme.x')'.

Source | Tailwind docs

.my-class {
    background-color: theme('colors.indigo.500');
}

Use the color() function to access your Tailwind config theme's color values using dot notation. It allowes you to reference a value from your theme color configuration.

It's a shortcurt to theme('colors.x')'.

As an alternative for dot notation, an unlimited parameters list may be provided to access the nested values.

Source

.my-class {
    background-color: color('indigo'); // defaulting to the "500" shade
    background-color: color(indigo); // defaulting to the "500" shade
    background-color: color('indigo.800');
    background-color: color(indigo, '800');
    background-color: color('indigo', 800);
    background-color: color('indigo', '800');
    background-color: color(indigo, 800);
}

Controls how elements are sized and placed across grid columns.

Source | Tailwind docs

.my-class {
    grid-column: col(3); // grid-column: span 3 / span 3;
}

Functions for controlling the font family, size or weight of an element.

The font() function relies on the fact that the Tailwind confing won't have same keys for fontFamily, fontWeight, or fontSize. If your config does have similar key names for those, please use the dedicated font functions instead.

Source | Tailwind font-family docs | Tailwind font-weight docs | Tailwind font-size docs

.my-class {
    font-size: font-size(2xl);
    font-family: font-family(sans);
    font-weight: font-weight(black);

    // - or -

    font-size: font(2xl);
    font-family: font(sans);
    font-weight: font(black);

    // font-size: 1.5rem;
    // font-family: system-ui -apple-system "Segoe UI"...;
    // font-weight: 900;
}

Specifies the columns in a grid layout.

Source | Tailwind docs

.my-class {
    grid-template-columns: grid-cols(3); // grid-template-columns: repeat(3, minmax(0, 1fr));
}

Controls the leading (line height) of an element.

Source | Tailwind docs

.my-class {
    line-height: leading(relaxed); // line-height: 1.625;
}

Controls the border radius of an element.

Source | Tailwind docs

.my-class {
    border-radius: rounded(full); // border-radius: 9999px;
}

Reference responsive breakpoints in your project.

Source | Tailwind docs

.my-class {
    @media (min-width: screen(md)) {
        background-color: color('indigo.500');
    }

    // @media (min-width: 768px) {
    //     background-color: #667eea;
    // }
}

Controls the box shadow of an element.

Source | Tailwind docs

.my-class {
    box-shadow: shadow(sm); // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

Function for setting the "size" of an element. It referes to your theme's width and maxWidth values.

Source

.my-class {
    height: size('1/2'); // height: 50%;
}

Reference a value from the global spacing and sizing scale configuration of your project. It referes to your theme's margin value. It will most likely have the "auto", positive and negative spacing values.

Source

.my-class {
    margin-top: space(4);
    margin-left: space(auto);
    margin-right: space(auto);
    margin-bottom: space(-4);

    // margin-top: 1rem;
    // margin-left: auto;
    // margin-right: auto;
    // margin-bottom: -1rem;
}

Controls the tracking (letter spacing) of an element.

Source | Tailwind docs

.my-class {
    letter-spacing: tracking(wide); // letter-spacing: 0.025em;
}

Functions for controlling CSS transitions.

Source | Tailwind transition-property docs | Tailwind transition-duration docs | Tailwind transition-timing-function docs | Tailwind transition-delay docs

.my-class {
    transition-property: transition-property(colors);
    transition-duration: transition-duration(700);
    transition-timing-function: transition-timing(in-out);
    transition-delay: transition-delay(100);

    // - or -

    transition: transition(colors, 700, in-out, 100); // Defaults : transition($property: default, $duration: 200, $timing: in-out, $delay: '')

    // transition-property: background-color, border-color, color, fill, stroke;
    // transition-duration: 700ms;
    // transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    // transition-delay: 100ms;
}

For a list of available mixins, check out our mixins folder.

The config variable that makes this whole thing work!

The values are generated from your Tailwind config file. If you would like to make changes do so in that file instead as any changes here will be overwritten.

The base entry point for your SASS styles.

// Functions
@import "functions/helpers";
@import "functions/config";
@import "functions/theme";
@import "functions/color";
@import "functions/col";
@import "functions/font";
@import "functions/grid-cols";
@import "functions/leading";
@import "functions/rounded";
@import "functions/screen";
@import "functions/shadow";
@import "functions/size";
@import "functions/space";
@import "functions/tracking";
@import "functions/transition";

// Mixins
@import "mixins/feature-testing";
@import "mixins/miscellaneous";
@import "mixins/screen-reader";
@import "mixins/screens";
@import "mixins/transition";
@import "mixins/typography";

// Variables
@import "variables/config";

// TailwindCSS
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";