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.