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

Introduction

Hey, DEV Neighborhood! 😉

I’ve launched the Gowebly v1.8.0 which incorporates daisyUI parts library help for the frontend.

However let’s not get forward of ourselves, let’s take a better look.

📝 Desk of contents

What’s daisyUI?

daisyUI is the preferred, free and open-source element library for Tailwind CSS. This library provides element class names to Tailwind CSS, so you can also make lovely web sites sooner than ever.

Take Tailwind CSS to the subsequent degree

daisyUI provides class names to Tailwind CSS for all widespread UI parts, like btn, card, toggle and plenty of extra. This permits us to concentrate on necessary issues as an alternative of styling primary parts for each venture.

As an alternative of writing 100 class names…

Use semantic class names! It is descriptive, sooner, cleaner and simpler to take care of.

No extra ugly HTML

Write fewer class names, use element class names, modify them utilizing Tailwind CSS utilities. For instance, daisyUI can convert this HTML code:

<div class="w-80 rounded-2xl bg-gray-100">
  <div class="flex flex-col gap-2 p-8">
    <enter placeholder="E-mail" 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">
      Settle for phrases of use
      <div class="relative inline-block">
        <enter sort="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">
      Undergo publication
      <div class="relative inline-block">
        <enter sort="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 lively:scale-95">Save</button>
  </div>
</div>

To this:

<div class="card bg-base-200 w-80">
  <div class="card-body">
    <enter placeholder="E-mail" class="enter input-bordered" />
    <label class="label cursor-pointer">
      Settle for phrases of use
      <enter sort="checkbox" class="toggle" />
    </label>
    <label class="label cursor-pointer">
      Undergo publication
      <enter sort="checkbox" class="toggle" />
    </label>
    <button class="btn btn-neutral">Save</button>
  </div>
</div>

Fewer class names, sooner improvement, smaller file dimension

With daisyUI, you write 80% fewer class names and your HTML dimension shall be about 70% smaller.

Extremely customizable

Powered by Tailwind CSS utility lessons. daisyUI is constructed on prime of Tailwind CSS so you may customise every thing utilizing utility lessons.

Pure CSS, framework agnostic, works in all places!

daisyUI is a plugin for Tailwind CSS. It really works on all JS frameworks and does not want a JS bundle file. Set up daisyUI as a dev dependency and use the category names similar to another Tailwind CSS class identify.

↑ Table of contents

Tips on how to use daisyUI with Gowebly CLI?

The very first thing it is best to do is confirm that you’re utilizing Gowebly CLI model v1.8.0 or increased.

Subsequent, begin creating the configuration file:

gowebly init

The CLI will generate a .gowebly.yml file with the next config:

backend:
  module_name: venture
  go_framework: default
  template_engine: default
  port: 7000
  timeout:
    learn: 5
    write: 10

frontend:
  package_name: venture
  css_framework: default
  runtime_environment: default
  hyperscript: newest

Sure, you are proper! ✨ Simply change the css_framework choice within the frontend block to daisyui.

Now, begin making a venture:

gowebly create

And CLI created a brand new venture with the daisyUI.

Yeah, it is simply working! 🎉

↑ Table of contents

Pictures and movies by

P.S.

If you need extra articles (like this) on this weblog, then put up a remark under and subscribe to me. Thanks! 😻

And naturally, you may assist me make builders’ lives even higher! Simply hook up with one among my initiatives as a contributor. It is easy!

My most important initiatives that want your assist (and stars) 👇

• 🔥 gowebly: A next-generation CLI device for simply construct wonderful net functions with Go on the backend, utilizing htmx & hyperscript and the preferred atomic/utility-first CSS frameworks on the frontend.
• ✨ create-go-app: Create a brand new production-ready venture with Go backend, frontend and deploy automation by operating one CLI command.

Different my small initiatives: yatr, gosl, json2csv, csv2api.