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.
- 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.
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.
## 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
See the LICENSE file for details. In summary, osom-ui is licensed under the MIT license.