Package Exports

flatten-tailwindcss-theme
flatten-tailwindcss-theme/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (flatten-tailwindcss-theme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🔨 flatten-tailwindcss-theme

Flatten TailwindCSS theme objects for plugins to conveniently generate utilities and components.

Requirements

Node.js 12+
Tailwind CSS 2+

Install

yarn add flatten-tailwindcss-theme

Or if you use npm:

npm i --save flatten-tailwindcss-theme

Usage

In a TailwindCSS plugin

const plugin = require("tailwindcss/plugin");
const flatten = require("flatten-tailwindcss-theme");

module.exports = plugin(({ addUtilities, variants, theme, e }) => {
  const colors = flatten(theme("colors"));
  const utils = Object.entries(colors).reduce(
    (res, [key, value]) =>
      Object.assign(res, {
        [`.${e(`textfill-${key}`)}`]: {
          "-webkit-text-fill-color": value,
        },
      }),
    {}
  );
  addUtilities(utils, variants("textfill"));
});

The above plugin add classes: textfill-white, textfill-gray-100, textfill-gray-200, ... , textfill-blue-100, textfill-blue-200, ... , etc.

In a generic Node.js task

const flatten = require("flatten-tailwindcss-theme");

const output = flatten({
  transparent: "transparent",
  current: "currentColor",
  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",
  },
});

console.log(output);

// Output:
{
  transparent: 'transparent',
  current: 'currentColor',
  black: '#000',
  white: '#fff',
  'gray-100': '#f7fafc',
  'gray-200': '#edf2f7',
  'gray-300': '#e2e8f0',
  'gray-400': '#cbd5e0',
  'gray-500': '#a0aec0',
  'gray-600': '#718096',
  'gray-700': '#4a5568',
  'gray-800': '#2d3748',
  'gray-900': '#1a202c',
  'red-100': '#fff5f5',
  'red-200': '#fed7d7',
  'red-300': '#feb2b2',
  'red-400': '#fc8181',
  'red-500': '#f56565',
  'red-600': '#e53e3e',
  'red-700': '#c53030',
  'red-800': '#9b2c2c',
  'red-900': '#742a2a'
}

Contributing

Requirements

Node 12+
Yarn 1.22+

Setup

Install requirements
Clone the repository
Run yarn to install dependencies

Develop

Commit adhering to Angular commit convention, use yarn commit or Code conventional commits to commit interactively
Submit a PR and make sure required status checks pass
When a PR is merged or code is pushed to master, Github automatically builds and publishes a new release if there're relevant changes

Made by @phuctm97.