DEV Community

Cover image for 🔥 Frontend update: the Gowebly CLI now supports daisyUI components library
Vic Shóstak
Vic Shóstak

Posted on

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

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.

GitHub logo 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

daisyUI

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Yes, you're right! ✨ Just switch the css_framework option in the frontend block to daisyui.

Now, start creating a project:

gowebly create
Enter fullscreen mode Exit fullscreen mode

And Gowebly CLI created a new project with the daisyUI.

Yeah, it's just working! 🎉

↑ Table of contents

Photos and videos by

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 for easily build amazing web applications with Go on the backend, using htmx & hyperscript and the most popular atomic/utility-first 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.

Top comments (0)