osom-ui

Overview

I used daisyUI when working on the osom-web project, and it worked perfectly in most situations.

However, while using the CSS Modules, I discovered a few minor issues.

• When using the @apply directive in a CSS module, the class name is removed and only the properties are kept.
• daisyUI completes its components with a combination of CSS classes (e.g. btn btn-outline btn-primary).

As a result, daisyUI components cannot be used in @apply directives. If you want to use Daisy UI components, you need to expose them to the class attribute in HTML.

Like this:

<button className={styles.classA + ' btn-outline ..'} />

This acts as a factor that hinders readability. (At least not my preferred coding style) I advocate splitting HTML/JS/CSS as much as possible from a software architecture perspective. So I want to create a tailwind component that is compatible with the @apply directive.

Project rule

• It is assumed that the @apply directive is actively used in CSS modules.
• If possible, use selectors that use basic HTML tags or attributes.
• If there is no appropriate HTML attribute, use the data-* attribute.

Usage

Install package

npm install osom-ui

Apply the plugin to the tailwind.config.js file

module.exports = {
  plugins: [require('osom-ui')],
};

Please refer to the documentation for additional information.

Scripts

## Setup Yarn v2 (Berry)
./yarn set version berry

## Compiles and minifies for production
./yarn build:tailwind

## Style check
./yarn style

## Lints and fixes files
./yarn lint

## Run your unit tests
yarn test

License

See the LICENSE file for details. In summary, osom-ui is licensed under the MIT license.