Tw-presets NPM

tw-presets

tw-presets Plugin is a collection of custom utility classes designed to simplify common layout and styling tasks. With presets for animations, text selection control, flexbox centering, and more, this plugin enhances the capabilities of Tailwind CSS, making it easier for developers to create modern and responsive web designs.

Installation:

$ npm install tw-presets

Usage

In order to use the plugin, add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: [
    // ...
    require('tw-presets'),
    // ...
  ],
};

Classes to be used:

Utility Class	Description
`transition-basic`	Utility class for defining custom animations based on default transition properties like duration, property, and timing function.
`prevent-selection`	Utility class for preventing text selection on elements by applying various CSS properties such as `user-select`, `webkit-user-drag`, etc.
`flex-center`	Utility class for creating a centered flex layout by applying `display: flex`, `justify-content: center`, and `align-items: center` styles.
`inline-flex-center`	Utility class for creating a centered inline flex layout by applying `display: inline-flex`, `justify-content: center`, and `align-items: center` styles.
`backface-hidden`	Utility class for hiding the backface of an element by applying `backface-visibility: hidden`.
`backface-visible`	Utility class for showing the backface of an element by applying `backface-visibility: visible`.

License

tw-presets is licensed under the MIT License.

tailwind-css-plugin tailwind tailwindcss css postcss plugin

1.0.1

1 year ago

1.0.0

1 year ago