Vic Shóstak

Posted on Nov 21, 2023 • Updated on Apr 25

🔥 Frontend update: the Gowebly CLI now supports daisyUI components library

#go #webdev #beginners #opensource

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.

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.

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library

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.

↑ Table of contents

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! 🎉

↑ Table of contents

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! 😻

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.

Other my small projects: yatr, gosl, json2csv, csv2api.

DEV Community