twdutl

Provide helper function for building tailwindcss utilities

• Simple in use;
• No dependency;
• Has module & end-to-end tests;
• Can create static utilities and dynamic utilities in one time;
• Unpacked size only ~ 5kB;
• New features in developing now.

Install it

For now plugin is available only via npm

$ npm i twdutl -D

Import it

You need to have tailwind.config.js file in your project. If you don't, follow the tailwindcss documentation and create it first. Export twdutl function with destructuring

const { twdutl } = require('twdutl')

Or just like object prop

const twdutl = require('twdutl').twdutl

And then add it to plugins array

plugins: [
  twdutl([]),
  ...
  ...
]

!!!Be aware!!!

twdutl is NOT a module, so it should not be used with import statement

import { twdutl } from 'twdutl' // will not work

It will cause Cannot use import statement outside a module error.

Use it

Function accepts an array of objects with folowing model

{ 
   name: <string>,
   value: <string>,
   defaults: <array<string|number>>,
   dynamic: Boolean,
}

where, Name and value - represents class name and it value as a common tailwindcss class. With using masks, you can provide dynamic values from defaults option.

{ 
   name: 'white-op-{v}',
   value: 'background-color: rgba(255, 255, 255, {v}%)'
}

Defaults - array of the all possible default values created for utility.

{ 
   defaults: [9, 18, 24]
}

Dynamic - if set this flag to true, it let you use dynamic values inside your classes

<div class="white-op-[15]"></div> <!-- converts to: background-color: rgba(255, 255, 255, 15%) -->