🔥 Frontend update: the Gowebly CLI now supports daisyUI components library
Tags: go, webdev, beginners, opensource
Published: 2023-11-21 11:50:35

## Introduction

Hello, DEV Community! 😉

I've released the [Gowebly](https://github.com/gowebly/gowebly) `v1.8.0` which includes [daisyUI][daisyui_url] components library support for the frontend.

But let's not get ahead of ourselves, let's take a closer look.

<a name="toc"></a>
### 📝 Table of contents

- [What is daisyUI?](#what-is-daisyui)
- [How to use daisyUI with Gowebly CLI?](#how-to-use-daisyui-with-gowebly-cli)

<a name="#what-is-daisyui"></a>
## 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 https://github.com/saadeghi/daisyui no-readme %}

### 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:

```html
<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:

```html
<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](#toc)


![daisyUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktx1l5mk30hknf6sfnd2.png)

<a name="#how-to-use-daisyui-with-gowebly-cli"></a>
## 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:

```console
gowebly init
```

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

```yaml
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:

```console
gowebly create
```

And [Gowebly CLI][gowebly_url] created a new project with the **daisyUI**.

Yeah, it's just working! 🎉

[↑ Table of contents](#toc)

<a name=""></a>
## Photos and videos by

- Vic Shóstak https://github.com/koddr
- daisyUI authors https://daisyui.com

<!-- Article links -->

[daisyui_url]: https://daisyui.com

<a name=""></a>
## 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][gowebly_url]: 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][cgapp_url]: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.

Other my small projects: [yatr][yatr_url], [gosl][gosl_url], [json2csv][json2csv_url], [csv2api][csv2api_url].

<!-- Footer links -->

[gowebly_url]: https://github.com/gowebly/gowebly
[cgapp_url]: https://github.com/create-go-app
[yatr_url]: https://github.com/koddr/yatr
[gosl_url]: https://github.com/koddr/gosl
[csv2api_url]: https://github.com/koddr/csv2api
[json2csv_url]: https://github.com/koddr/json2csv