- Notifications
You must be signed in to change notification settings - Fork1
🔨 Flatten TailwindCSS theme objects for plugins to conveniently generate utilities and components.
License
phuctm97/flatten-tailwindcss-theme
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Flatten TailwindCSS theme objects for plugins to conveniently generate utilities and components.
Node.js 12+
Tailwind CSS 2+
yarn add flatten-tailwindcss-theme
Or if you usenpm:
npm i --save flatten-tailwindcss-theme
constplugin=require("tailwindcss/plugin");constflatten=require("flatten-tailwindcss-theme");module.exports=plugin(({ addUtilities, variants, theme, e})=>{constcolors=flatten(theme("colors"));constutils=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.
constflatten=require("flatten-tailwindcss-theme");constoutput=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'}Node 12+
Yarn 1.22+
Install requirements
Clone the repository
Run
yarnto install dependencies
Commit adhering toAngular commit convention, use
yarn commitorCode conventional commits to commit interactivelySubmit 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
About
🔨 Flatten TailwindCSS theme objects for plugins to conveniently generate utilities and components.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Contributors2
Uh oh!
There was an error while loading.Please reload this page.