Installation

This package is the core package of the AtomOrg CSS utility. It contains all the core utilities and functions that are required and used inside the AtomOrg CSS utility packages and plugins. It is not meant to be used as a standalone package. If you want to use the AtomOrg CSS utility, you should install the atomorg-css package instead.

npm install atomorg-css
# or
yarn add atomorg-css
# or
pnpm add atomorg-css

Documentation

Documentation is available on the AtomOrg CSS website.

Custom Class Values

With the latest update, you can now use custom values for classes. This feature allows you to specify custom width, height, and background color values directly in your class names.

Custom Width

You can set custom width values using the w-[value] syntax. For example:

<div style={{ atomcss("w-[25rem]") }}>This div has a width of 25rem</div>
<div style={{ atomcss("w-[25px]") }}>This div has a width of 25px</div>

Custom Height

You can set custom height values using the h-[value] syntax. For example:

<div style={{ atomcss("h-[25rem]") }}>This div has a height of 25rem</div>

Custom Background Color

You can set custom background color values using the bg-[value] syntax. For example:

<div style={{ atomcss("bg-[#000]") }}>This div has a background color of #000</div>

License

This project is licensed under the Apache-2.0 License - see the LICENSE file for details.