You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I love tailwindcss and use it frequently. I also like daisyui very much. Using these for development saves me a lot of effort.
However, I encountered some scenarios in the project where I needed to deeply customize the Css UI component. At this time, daisyui could not solve my problem for the time being.
So I came up with some ideas and wrote icestack inspired by tailwindcss and daisyui
This is a Css UI framework generation and management tool. Through it, you can easily extend the style, and you can also easily build your own Css UI from scratch and combine it with tailwindcss. use!
This command reads the configuration and builds the product in the './my-ui' directory under the current configuration file. Then you can directly import these css and js files, but giving them to tailwindcss is more convenient to use.
Used as tailwindcss plugin
Register the icestackPlugin plugin in tailwind.config.js and pass a loadDirectory parameter to locate the location where the product was just generated:
constpath=require('node:path')const{ icestackPlugin }=require('@icestack/tailwindcss')/** @type {import('tailwindcss').Config} */module.exports={// ...plugins: [icestackPlugin({// Absolute path to the loading directoryloadDirectory: path.resolve(__dirname,'my-ui'),// Whether to inject tailwindcss theme config// When true, the generator's primary success warning colors will enter the tailwindcss.theme.extend configuration// You can use bg-primary / text-success// Default value: falseloadConfig: true// ...})]}
Then as long as we run the project normally, we can directly use all the CSS components in the my-ui directory!
Default preset
By default, a set of @icestack/preset-default for Css components is built into @icestack/ui, which absorbs the excellent writing style of daisyui and remains consistent in many places.
At the same time, you can use configuration items to extend and override its original style, see override
If you want to build your own UI framework from 0 to 1, you can set mode to none in icestack.config.cjs, and @icestack/preset will not be loaded at this time.
Start from scratch
Build button component
We can select our favorite button component from the component library list of the project awesome-tailwindcss. Its html is as follows
Then we start to refine html and extract its styles:
<aclass="btn"><span>Hover Me</span></a>
Convert the original long-passed class into @apply, and wrap it in the selector .btn, then convert the last animated div element into a pseudo-element, and modify the style.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Use IceStack to build your CSS UI
@icestack/ui
I love
tailwindcss
and use it frequently. I also likedaisyui
very much. Using these for development saves me a lot of effort.However, I encountered some scenarios in the project where I needed to deeply customize the
Css UI
component. At this time,daisyui
could not solve my problem for the time being.So I came up with some ideas and wrote
icestack
inspired bytailwindcss
anddaisyui
This is a
Css UI
framework generation and management tool. Through it, you can easily extend the style, and you can also easily build your ownCss UI
from scratch and combine it withtailwindcss
. use!Let's see how to use it!
Install
@icestack/ui
# yarn | pmpm npm install -D @icestack/ui @icestack/tailwindcss
@icestack/ui
will be downloaded and installed locally, and a commandicestack
will be registeredInitialization configuration file
After installing
@icestack/ui
, execute:This command will generate an
icestack.config.cjs
file in the current execution directory. The default content is as follows:Build style
This command reads the configuration and builds the product in the
'./my-ui'
directory under the current configuration file. Then you can directly import thesecss
andjs
files, but giving them totailwindcss
is more convenient to use.Used as tailwindcss plugin
Register the
icestackPlugin
plugin intailwind.config.js
and pass aloadDirectory
parameter to locate the location where the product was just generated:Then as long as we run the project normally, we can directly use all the
CSS
components in themy-ui
directory!Default preset
By default, a set of
@icestack/preset-default
forCss
components is built into@icestack/ui
, which absorbs the excellent writing style ofdaisyui
and remains consistent in many places.At the same time, you can use configuration items to extend and override its original style, see override
If you want to build your own
UI
framework from 0 to 1, you can setmode
tonone
inicestack.config.cjs
, and@icestack/preset
will not be loaded at this time.Start from scratch
Build button component
We can select our favorite
button
component from the component library list of the project awesome-tailwindcss. Itshtml
is as followsComponent style refinement
Then we start to refine
html
and extract its styles:Convert the original long-passed
class
into@apply
, and wrap it in the selector.btn
, then convert the last animateddiv
element into a pseudo-element, and modify the style.Write configuration file
Then after executing
icestack build
,.btn
will be successfully loaded bytailwindcss plugin
. You can write like this:Add more colors
For example, if we have requirements, the default is
bg-blue-600 focus:ring-blue-300
But what should we do if we can pass in red, yellow, and other colors?
After making the changes, execute
npx icestack build
to build. After completion, you can use it directly:Add more sizes
If we want to add more dimensions to this
button
component, we can set it like this:Then build it and you can use it directly:
More
You must have noticed that the
schema
method has multiple parameters:selector
is the selectortypes
is the automatically generated color name in thebase
optionparams
is the incoming parameter, which can render different performances of the component according to different parameters.We can render different
Css
style codes based on different parameters.Of course, you can also find more examples and usage on the
icestack
official website.Everyone is welcome to try it!
Beta Was this translation helpful? Give feedback.
All reactions