https://github.com/drylikov/sass_tailwind_functions

A Sass plugin that provides the TailwindCSS theme and screen functions to Sass files. Makes using tailwind with Sass a bit easier.
https://github.com/drylikov/sass_tailwind_functions

Last synced: 8 days ago
JSON representation

A Sass plugin that provides the TailwindCSS theme and screen functions to Sass files. Makes using tailwind with Sass a bit easier.

• Host: GitHub
• URL: https://github.com/drylikov/sass_tailwind_functions
• Owner: drylikov
• License: mit
• Created: 2024-07-01T04:06:06.000Z (5 months ago)
• Default Branch: drylikov
• Last Pushed: 2024-07-01T04:07:20.000Z (5 months ago)
• Last Synced: 2024-07-05T15:37:00.397Z (4 months ago)
• Language: JavaScript
• Size: 150 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sass Tailwind functions

A Sass plugin that provides the TailwindCSS `theme` and `screen` functions

to Sass files. Makes using tailwind with Sass a bit easier.

## Setup

```sh

npm i sass-tailwind-functions

```

Configuring sass plugins requires using the API directly (sorry no CLI support).

If using Sass directly:

```js

const createFunctions = require('sass-tailwind-functions')

const tailwindFunctions = createFunctions(sass, 'path/to/tailwind.config.js')

const result = sass.renderSync({

  ...,

  functions: {

    ...tailwindFunctions

  }

})

```

bundlers like webpack, et all also allow passing options

to sass, follow specific instuctions for each tool (e.g. sass-loader)

The base export works with both the modern and legacy [sass

APIs](https://sass-lang.com/documentation/js-api). You can also specify the one

you need:

```js

const legacyFunctions = require('sass-tailwind-functions/legacy');

const modernFunctions = require('sass-tailwind-functions/modern');

```

## Usage

If configured correctly both the `theme`, `screen` and `e` functions will

be globally available in your sass files.

```scss

@media #{screen(md)} {

  .btn {

    width: theme('padding.2');

  }

}

```

Just like with Tailwind, the theme accepts an optional default value

if the key is missing:

```scss

.btn {

  width: theme('padding.nope', 3px);

}

```

Because the functions are Sass plugins, values returned from `theme`

can be used in calculations, or mixed with other sass functions:

```scss

$hover-color: adjust-color(theme('colors.blue.400'), $alpha: 0.5);

$height: theme('padding.3') * 2;

```

### Escaping

Since tailwind classes tend to require escaping (e.g. `.p-0\.5`) it

can be a bit of a pain using some of the tailwind keys like the loop above.

To make that easier, a `e()` function is also included (since Sass doesn't have an escape built in).

```scss

@each $name, $value in theme('spacing') {

  .square-#{e($name)} {

    width: $value;

    height: $height;

  }

}

```