Skip to content

Latest commit

 

History

History
393 lines (302 loc) · 9.31 KB

README.md

File metadata and controls

393 lines (302 loc) · 9.31 KB
Raw

Tailwindcss-export-config

Export Tailwind config options like a pro

Features

  • 🚀 Exports Tailwindcss 3 config options to SASS, SCSS, LESS, Stylus, Custom CSS Properties or even JSON.
  • 💥 CLI and Node api support
  • 💪 Unit Tested
  • ⚙️ Also available for Gulp

Getting started

Using npm:

npm install tailwindcss-export-config

or with yarn:

yarn add tailwindcss-export-config

Make a package.json script and run it for convenience

{
  "scripts": {
    "export-tailwind-config": "tailwindcss-export-config --config=path/to/tailwind.config.js --destination=destination/of/generated/tailwind-variables --format=scss --quoted-keys=true"
  }
}

You can also use the Node API

import TailwindExportConfig from 'tailwindcss-export-config'

const converter = new TailwindExportConfig({
  config: 'path/to/tailwind.config.js',
  destination: 'converted/file/destination',
  format: 'scss',
  prefix: 'tw',
  flat: true,
  quotedKeys: true,
  preserveKeys: ['colors', 'screens'],
})

// writeToFile returns a promise so we can chain off it
converter.writeToFile()
  .then(() => {
    console.log('Success')
  })
  .catch((error) => {
    console.log('Oops', error.message)
  })

Config Options

All options are available to the CLI and node package. Type tailwindcss-export-config --h for help.

Prop Type Required Description
config String,Object true Tailwindcss config path or config object to transform
destination String true Destination to save converted file
format String true The format in which to convert the file
prefix String false An optional prefix for each variable name
flat Boolean false Optionally transforms the variables from nested maps to flat level variables. Less does not support nested maps so we default to flat for them always. Defaults to false.
quoted-keys Boolean false (quotedKeys in the Node API) - Whether keys in maps should be quoted or not. We recommend to have this set to true. Defaults to false.
flatten-maps-after Number false (flattenMapsAfter in the Node API) - After what level should it start flattening deeply nested maps. Defaults to -1 (always flatten).
preserve-keys Array false (preserveKeys in the Node API) - Always keep those keys in export. Defaults to [].

Example export

Lets get a portion of the Tailwind config

module.exports = {
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      }
    }
  }
}

Using the CLI command

tailwindcss-export-config --config=tailwind.config.js --destination=tailwind-variables --format=scss --flat

How would this look when generated?

SCSS

Using the flat param we get:

$screens-sm: 640px;
$screens-md: 768px;
$screens-lg: 1024px;
$screens-xl: 1280px;

$fontFamily-display: (Gilroy, sans-serif);
$fontFamily-body: (Graphik, sans-serif);

//... other vars
$colors-pink-800: #97266d;
$colors-pink-900: #702459;
$colors-cyan: #9cdbff;

or without with the flat param set to false

$fontFamily: (
        display: (Gilroy, sans-serif),
        body: (Graphik, sans-serif),
);

$colors: (
  //... other vars
        pink-700: #b83280,
        pink-800: #97266d,
        pink-900: #702459,
        cyan: #9cdbff,
);

When working with SASS, the second (nested map) approach is a bit more annoying to work with as you have to do map-get($colors, black) but things are easier to loop if you need to.

Sass is almost the same and you can import both sass and scss vars into the same project. We support them both if someone prefers one syntax over the other.

LESS

@fontFamily-display: Gilroy, sans-serif;
@fontFamily-body: Graphik, sans-serif;

// other vas
@colors-pink-600: #d53f8c;
@colors-pink-700: #b83280;
@colors-pink-800: #97266d;
@colors-pink-900: #702459;
@colors-cyan: #9cdbff;

Note: Less does not have nested maps, so passing the flat param will not do anything

Stylus

$fontFamily-display = (Gilroy, sans-serif);
$fontFamily-body = (Graphik, sans-serif);

// ...other vars

$colors-pink-800 = #97266d;
$colors-pink-900 = #702459;
$colors-cyan = #9cdbff;

or with the flat param to false

$fontFamily = {
  display: (Gilroy,sans-serif),
  body: (Graphik,sans-serif),
};

// ...other vars

$colors = {
   // ...other vars
  "pink-600": #d53f8c,
  "pink-700": #b83280,
  "pink-800": #97266d,
  "pink-900": #702459,
  cyan: #9cdbff,
}

With stylus, using nested maps is a matter of reaching using dot notation $colors.black or $colors[black]. JavaScript anyone?

Custom CSS Properties

:root {
  --fontFamily-display: Gilroy, sans-serif;
  --fontFamily-body: Graphik, sans-serif;

  --borderWidth-0: 0;
  --borderWidth-2: 2px;
  --borderWidth-4: 4px;
  --borderWidth-default: 1px;

  /* etc... */
}

JSON

{
  "fontFamily": {
    "display": [
      "Gilroy",
      "sans-serif"
    ],
    "body": [
      "Graphik",
      "sans-serif"
    ]
  },
  "borderWidth": {
    "0": "0",
    "2": "2px",
    "4": "4px",
    "default": "1px"
  }
}

Prefix

You can prefix variables to escape naming collisions by using the prefix param

tailwindcss-export-config --config=tailwind.config.js --destination=tailwind-variables --format=scss --flat --prefix=tw
$tw-fontFamily-display: (Gilroy, sans-serif);
$tw-fontFamily-body: (Graphik, sans-serif);

$tw-colors-pink-600: #d53f8c;
$tw-colors-pink-700: #b83280;
$tw-colors-pink-800: #97266d;
$tw-colors-pink-900: #702459;
$tw-colors-cyan: #9cdbff;

Quoted Keys

SASS and other preprocessors recommend defining map keys in quotes. It is possible comply with that, by using the optional quotedKeys setting.

tailwindcss-export-config --config=tailwind.config.js --destination=tailwind-variables --format=scss --quoted-keys=true
$fontFamily: (
        "display": (Gilroy, sans-serif),
        "body": (Graphik, sans-serif),
);

$colors: (
  //... other vars
        "pink-700": #b83280,
        "pink-800": #97266d,
        "pink-900": #702459,
        "cyan": #9cdbff,
);

Flattening deep maps

If your tailwind config has a deeply nested object, it can be converted to a deeply nested map, in SASS or Stylus, or a flattened, single level map.

Given the object below:

module.exports = {
  theme: {
    customForms: {
      colors: {
        blue: 'blue',
        green: 'green',
      },
      somethingElse: {
        level1: {
          color: 'pink',
          arrayValue: ['a', 'b', 'c'],
        }
      }
    }
  }
}

By default it will convert to:

$customForms: (
        colors-blue: blue,
        colors-green: green,
        somethingElse-level1-color: pink,
        somethingElse-level1-arrayValue: (a, b, c),
);

If we want to keep the nested structure, similar to the tailwind config, we can set a high number for the flattenMapsAfter parameter.

tailwindcss-export-config --config=tailwind.config.js --destination=tailwind-variables --format=scss --flatten-maps-after=10
$customForms: (
        colors: (
                blue: blue,
                green: green,
        ),
        somethingElse: (
                level1: (
                        color: pink,
                        arrayValue: (a, b, c),
                ),
        ),
);

Preserve keys

When you have disabled some corePlugins, you can explicitly preserve some tailwind config keys using the preserveKeys parameter, both in CLI and in the node api.

tailwindcss-export-config --config=tailwind.config.js --destination=tailwind-variables --format=scss --preserveKeys=colors,screens

Note of caution

With Tailwind 1.9, some config options got removed from the corePlugins, so the extractor no longer emits them by default. Use the preserve-keys option explained above, to keep those options in the generated variables file.

tailwindcss-export-config --config=tailwind.config.js --destination=tailwind-variables --format=scss --preserveKeys=screens,spacing,colors

Removed Options

  1. colors
  2. screens
  3. spacing
  4. keyframes

Only include keys

When you only want some corePlugins, you can explicitly add these using the onlyIncludeKeys parameter, both in CLI and in the node api.

tailwindcss-export-config --config=tailwind.config.js --destination=tailwind-variables --format=scss --onlyIncludeKeys=colors,screens

Note of caution

When using the onlyIncludeKeys parameter, defined corePlugins and the preserveKeys parameter have no effect.

Compatibility

tailwindcss-export-config tailwindcss
4.x 3.x
3.x 2.x
2.x 0.x 
npm install tailwindcss-export-config@2