Notable Pastry Maker

    flatten-tailwindcss-theme

    1.0.0 • Public • Published

    🔨 flatten-tailwindcss-theme

    npm version GitHub license

    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

    1. Install requirements

    2. Clone the repository

    3. 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.

    Install

    npm i flatten-tailwindcss-theme

    DownloadsWeekly Downloads

    4,439

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    6.15 kB

    Total Files

    4

    Last publish

    Collaborators

    • phuctm97