Negotiable Paleobotanist Missions

    @tailwindcssinjs/tailwindcss-data
    TypeScript icon, indicating that this package has built-in type declarations

    0.17.0 • Public • Published

    @tailwindcssinjs/tailwindcss-data

    NPM version License

    The tailwind-data package uses Tailwind internals to extracts/generate all the data you could want from Tailwind. It provides the data in a structured way with the necessary utilities to create and manipulate this data.

    In short: Unofficial Tailwind developer API

    More info coming soon!

    This package is under development breaking changes possible!

    Install

    # with npm
    npm install @tailwindcssinjs/tailwindcss-data @tailwindcssinjs/class-composer tailwindcss
    
    # with Yarn
    yarn add @tailwindcssinjs/tailwindcss-data @tailwindcssinjs/class-composer tailwindcss

    Examples

    List all Tailwind Classes
    import corePlugins from "tailwindcss/lib/corePlugins";
    import {
      tailwindData,
      createTwClassDictionary,
    } from "@tailwindcssinjs/tailwindcss-data";
    
    import config from "../../../tailwind.config.js";
    
    const { utilitiesRoot, componentsRoot } = tailwindData(config, corePlugins);
    
    const twClassDictionary = createTwClassDictionary(
      componentsRoot,
      utilitiesRoot
    );
    
    function getTwClasses() {
      const out = Object.keys(twClassDictionary);
      console.log(out);
      return out;
    }
    
    // OUTPUT CSS:
    // [
    //   'container',   'form-input',    'form-textarea', 'form-multiselect',
    //   'form-select', 'form-checkbox', 'form-radio',    'prose',
    //   'prose-sm',    'prose-lg',      'prose-xl',      'prose-2xl',
    //   'space-y-0',   'space-x-0',     'space-y-1',     'space-x-1',
    //   ... 4247 more items
    // ]
    getTwClasses();
    Get CSS from Tailwind class
    import corePlugins from "tailwindcss/lib/corePlugins";
    import {
      tailwindData,
      createTwClassDictionary,
    } from "@tailwindcssinjs/tailwindcss-data";
    
    import config from "../../../tailwind.config.js";
    
    const {
      generateTwClassSubstituteRoot,
      utilitiesRoot,
      componentsRoot,
    } = tailwindData(config, corePlugins);
    
    const twClassDictionary = createTwClassDictionary(
      componentsRoot,
      utilitiesRoot
    );
    
    function getCSSFromTailwindClass(parsedClass: [string, string[]]) {
      const out = generateTwClassSubstituteRoot(
        twClassDictionary,
        parsedClass
      ).toString();
      console.log(out);
      return out;
    }
    
    // OUTPUT CSS:
    // @media (min-width: 1024px) {
    //   .md\:hover\:bg-red-300:hover {
    //       --bg-opacity: 1;
    //       background-color: #f8b4b4;
    //       background-color: rgba(248, 180, 180, var(--bg-opacity))
    //   }
    // }
    getCSSFromTailwindClass(["bg-red-300", ["hover", "md"]]);
    
    // OUTPUT CSS:
    // .hover\:bg-red-300:hover {
    //     --bg-opacity: 1;
    //     background-color: #f8b4b4;
    //     background-color: rgba(248, 180, 180, var(--bg-opacity))
    // }
    getCSSFromTailwindClass(["bg-red-300", ["hover"]]);
    
    // OUTPUT CSS:
    // .bg-red-300 {
    //   --bg-opacity: 1;
    //   background-color: #f8b4b4;
    //   background-color: rgba(248, 180, 180, var(--bg-opacity))
    // }
    getCSSFromTailwindClass(["bg-red-300", []]);
    Get CSS from Tailwind classes
    import corePlugins from "tailwindcss/lib/corePlugins";
    import {
      createTwClassDictionary,
      tailwindData,
    } from "@tailwindcssinjs/tailwindcss-data";
    
    import { TwClasses, twClassesParser } from "@tailwindcssinjs/class-composer";
    import config from "../../../tailwind.config.js";
    import { root } from "postcss";
    
    const {
      resolvedConfig,
      generateTwClassSubstituteRoot,
      utilitiesRoot,
      componentsRoot,
    } = tailwindData(config, corePlugins);
    
    const twParser = twClassesParser(resolvedConfig.separator);
    
    const twClassDictionary = createTwClassDictionary(
      componentsRoot,
      utilitiesRoot
    );
    
    function getCSSFromTailwindClasses(...twClasses: TwClasses[]) {
      const parsedTwClasses = twParser(twClasses);
    
      const combinedRoot = root();
      for (const parsedTwClass of parsedTwClasses) {
        const twRoot = generateTwClassSubstituteRoot(
          twClassDictionary,
          parsedTwClass
        );
        combinedRoot.append(twRoot);
      }
      const out = combinedRoot.toString();
      console.log(out);
      return out;
    }
    
    // OUTPUT CSS:
    // .bg-red-300 {
    //     --bg-opacity: 1;
    //     background-color: #f8b4b4;
    //     background-color: rgba(248, 180, 180, var(--bg-opacity))
    // }
    // @media (min-width: 1024px) {
    //     .md\:hover\:bg-red-300:hover {
    //         --bg-opacity: 1;
    //         background-color: #f8b4b4;
    //         background-color: rgba(248, 180, 180, var(--bg-opacity))
    //     }
    // }
    getCSSFromTailwindClasses("bg-red-300 md:hover:bg-red-300");
    Get CSS object style from Tailwind class
    import corePlugins from "tailwindcss/lib/corePlugins";
    import {
      createTwClassDictionary,
      tailwindData,
      transformTwRootToObjectStyle,
    } from "@tailwindcssinjs/tailwindcss-data";
    
    import config from "../../../tailwind.config.js";
    
    const {
      generateTwClassSubstituteRoot,
      utilitiesRoot,
      componentsRoot,
    } = tailwindData(config, corePlugins);
    
    const twClassDictionary = createTwClassDictionary(
      componentsRoot,
      utilitiesRoot
    );
    
    function getObjectStyleFromTailwindClass(parsedClass: [string, string[]]) {
      const twRoot = generateTwClassSubstituteRoot(twClassDictionary, parsedClass);
      const out = transformTwRootToObjectStyle(parsedClass[0], twRoot);
      console.log(JSON.stringify(out, null, 4));
      return out;
    }
    
    // OUTPUT OBJECT:
    // {
    //   "@media (min-width: 1024px)": {
    //       "&:hover": {
    //           "--bg-opacity": "1",
    //           "backgroundColor": [
    //               "#f8b4b4",
    //               "rgba(248, 180, 180, var(--bg-opacity))"
    //           ]
    //       }
    //   }
    // }
    getObjectStyleFromTailwindClass(["bg-red-300", ["hover", "md"]]);
    
    // OUTPUT OBJECT:
    // {
    //   "&:hover": {
    //       "--bg-opacity": "1",
    //       "backgroundColor": [
    //           "#f8b4b4",
    //           "rgba(248, 180, 180, var(--bg-opacity))"
    //       ]
    //   }
    // }
    getObjectStyleFromTailwindClass(["bg-red-300", ["hover"]]);
    
    // OUTPUT OBJECT:
    // {
    //   "--bg-opacity": "1",
    //   "backgroundColor": [
    //       "#f8b4b4",
    //       "rgba(248, 180, 180, var(--bg-opacity))"
    //   ]
    // }
    getObjectStyleFromTailwindClass(["bg-red-300", []]);
    Get CSS object style from Tailwind classes
    import corePlugins from "tailwindcss/lib/corePlugins";
    import {
      createTwClassDictionary,
      mergeObjectStyles,
      ObjectStyle,
      tailwindData,
      transformTwRootToObjectStyle,
    } from "@tailwindcssinjs/tailwindcss-data";
    
    import { TwClasses, twClassesParser } from "@tailwindcssinjs/class-composer";
    
    import config from "../../../tailwind.config.js";
    
    const {
      resolvedConfig,
      generateTwClassSubstituteRoot,
      utilitiesRoot,
      componentsRoot,
    } = tailwindData(config, corePlugins);
    
    const twParser = twClassesParser(resolvedConfig.separator);
    
    const twClassDictionary = createTwClassDictionary(
      componentsRoot,
      utilitiesRoot
    );
    
    function getObjectStyleFromTailwindClasses(...twClasses: TwClasses[]) {
      const parsedTwClasses = twParser(twClasses);
    
      const objectStyles: ObjectStyle[] = [];
      for (const parsedTwClass of parsedTwClasses) {
        const twRoot = generateTwClassSubstituteRoot(
          twClassDictionary,
          parsedTwClass
        );
        objectStyles.push(transformTwRootToObjectStyle(parsedTwClass[0], twRoot));
      }
    
      const out = mergeObjectStyles(objectStyles);
      console.log(JSON.stringify(out, null, 4));
      return out;
    }
    
    // OUTPUT OBJECT:
    // {
    //   "--bg-opacity": "1",
    //   "backgroundColor": [
    //       "#f8b4b4",
    //       "rgba(248, 180, 180, var(--bg-opacity))"
    //   ],
    //   "@media (min-width: 1024px)": {
    //       "&:hover": {
    //           "--bg-opacity": "1",
    //           "backgroundColor": [
    //               "#f8b4b4",
    //               "rgba(248, 180, 180, var(--bg-opacity))"
    //           ]
    //       }
    //   }
    // }
    getObjectStyleFromTailwindClasses("bg-red-300 md:hover:bg-red-300");

    License

    MIT. Copyright (c) 2020 Arthur Petrie.

    Keywords

    none

    Install

    npm i @tailwindcssinjs/tailwindcss-data

    DownloadsWeekly Downloads

    298

    Version

    0.17.0

    License

    MIT

    Unpacked Size

    41.3 kB

    Total Files

    30

    Last publish

    Collaborators

    • arthie