Introduction
Hello, DEV Community! 😉
I've released the Gowebly v1.8.0
which includes daisyUI components library support for the frontend.
But let's not get ahead of ourselves, let's take a closer look.
📝 Table of contents
What is daisyUI?
daisyUI is the most popular, free and open-source component library for Tailwind CSS. This library adds component class names to Tailwind CSS, so you can make beautiful websites faster than ever.
Take Tailwind CSS to the next level
daisyUI adds class names to Tailwind CSS for all common UI components, like btn
, card
, toggle
and many more. This allows us to focus on important things instead of styling basic elements for every project.
Instead of writing 100 class names...
Use semantic class names! It's descriptive, faster, cleaner and easier to maintain.
No more ugly HTML
Write fewer class names, use component class names, modify them using Tailwind CSS utilities. For example, daisyUI can convert this HTML code:
<div class="w-80 rounded-2xl bg-gray-100">
<div class="flex flex-col gap-2 p-8">
<input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100" />
<label class="flex cursor-pointer items-center justify-between p-1">
Accept terms of use
<div class="relative inline-block">
<input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
<span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>
</div>
</label>
<label class="flex cursor-pointer items-center justify-between p-1">
Submit to newsletter
<div class="relative inline-block">
<input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
<span class="pointer-events-none absolute start-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:start-7 peer-checked:bg-gray-900"></span>
</div>
</label>
<button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">Save</button>
</div>
</div>
To this:
<div class="card bg-base-200 w-80">
<div class="card-body">
<input placeholder="Email" class="input input-bordered" />
<label class="label cursor-pointer">
Accept terms of use
<input type="checkbox" class="toggle" />
</label>
<label class="label cursor-pointer">
Submit to newsletter
<input type="checkbox" class="toggle" />
</label>
<button class="btn btn-neutral">Save</button>
</div>
</div>
Fewer class names, faster development, smaller file size
With daisyUI, you write 80% fewer class names and your HTML size will be about 70% smaller.
Highly customizable
Powered by Tailwind CSS utility classes. daisyUI is built on top of Tailwind CSS, so you can customize everything using utility classes.
Pure CSS, framework-agnostic, works everywhere!
daisyUI is a plugin for Tailwind CSS. It works on all JS frameworks and doesn't need a JS bundle file. Install daisyUI as a dev dependency and use the class names just like any other Tailwind CSS class name.
How to use daisyUI with Gowebly CLI?
The first thing you should do is verify that you are using Gowebly CLI version v1.8.0
or higher.
Next, start creating the configuration file:
gowebly init
The CLI will generate a .gowebly.yml
file with the following config:
backend:
module_name: project
go_framework: default
template_engine: default
port: 7000
timeout:
read: 5
write: 10
frontend:
package_name: project
css_framework: default
runtime_environment: default
hyperscript: latest
Yes, you're right! ✨ Just switch the css_framework
option in the frontend
block to daisyui
.
Now, start creating a project:
gowebly create
And Gowebly CLI created a new project with the daisyUI.
Yeah, it's just working! 🎉
Photos and videos by
- Vic Shóstak https://github.com/koddr
- daisyUI authors https://daisyui.com
P.S.
If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻
❗️ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.
And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!
My main projects that need your help (and stars) 👇
- 🔥 gowebly: A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.
- ✨ create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.
Top comments (0)