Laravel: Tailwind Livewire UI Components
Tags: laravel, tailwindcss, javascript, livewire
Published: 2023-10-03 22:37:14

Oh, the sweet allure of [Tailwind CSS](https://tailwindcss.com/)! It’s like that trendy cafe downtown everyone wants a piece of. The sleek, utility-first structure it brings to the table has made it a darling in the web development realm. Now, pair that up with [Laravel](https://laravel.com/) [Livewire](https://laravel-livewire.com/), and you’ve got yourself a match made in heaven, or should I say, in code. But what if we could spice this love affair up a notch? Enter WireUI components at [Livewire-WireUI.com](https://livewire-wireui.com/). This nifty toolkit is like the secret sauce to injecting Tailwind CSS goodness into **Livewire**, making **Laravel** development faster, more enjoyable, and oh-so beautiful 😍.

## Cutting to the Chase with WireUI

We’ve all been there - wanting to whip up a user interface that’s not only easy on the eyes but also a breeze to work with. That's where WireUI comes in, offering a smorgasbord of pre-built UI components 🔥 ready to be embraced by your Livewire projects. It’s like finding a shortcut on your morning commute that shaves off precious minutes, allowing you to catch extra zzz’s or, let’s be honest, another episode of your favorite series😎.

## Tailwind CSS Meets Livewire: A Symphony of Productivity

The harmony between **Tailwind CSS** and **Livewire** is something akin to a well-orchestrated symphony. Tailwind CSS lays down the rhythm with its intuitive utility classes, making styling feel like a walk in the park. On the other hand, Livewire conducts the melody, orchestrating state-driven components seamlessly without breaking a sweat😁.

## Look at these nice components

**Simple Input**
![livewire tailwind Simple Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftdpd6s31r7jbb1r9iow.png)

**Email input with suffix**
![livewire tailwind Email input with suffix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7ex48evsc5oacmftavg.png)

**Searchable Select Dropdown!**
![livewire tailwind Searchable Select Dropdown!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sliaqi3akkaglys5hmou.png)

**Color Picker**
![livewire tailwind Color Picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7k0o1q7523gqbo62gaol.png)


---




## Diving Deeper: A Look Under the Hood

To install simply 

```
composer require wireui/wireui
```

Add the WireUI tag above Alpinejs script tag in your page layout:

```html
<html>
    <head>
        ...
        <wireui:scripts />
        <script src="//unpkg.com/alpinejs" defer></script>
    </head>
</html>
```

Alternatively, you can use the equivalent Blade directive:

```html
...
@wireUiScripts
<script src="//unpkg.com/alpinejs" defer></script>
...
 
Sometimes you need to pass extra html attributes to script tag, like the nonce attribute
@wireUiScripts(['nonce': 'csp-token'])
@wireUiScripts(['nonce': 'csp-token', 'foo' => true])
```

Add the following settings to your Tailwindcss config file, tailwind.config.js:

```javascript
module.exports = {
    ...
    presets: [
        ...
        require('./vendor/wireui/wireui/tailwind.config.js')
    ],
    content: [
        ...
        './vendor/wireui/wireui/resources/**/*.blade.php',
        './vendor/wireui/wireui/ts/**/*.ts',
        './vendor/wireui/wireui/src/View/**/*.php'
    ],
    ...
}
```

WireUI does not need any additional configuration, but you can publish the files and customize them to your preference.

```
php artisan vendor:publish --tag='wireui.config'
php artisan vendor:publish --tag='wireui.resources'
php artisan vendor:publish --tag='wireui.lang'
```

## Beyond the Horizon: Exploring the Ecosystem

The beauty of the Laravel ecosystem is its boundless capacity for growth and innovation. Take [ByteBricks](https://bytebricks.ai/) for instance. This platform takes Laravel development up a notch, offering solutions that dovetail perfectly with the principles of rapid, elegant coding we see in WireUI.

Remember our little rendezvous with [Laravel’s whereHas](https://dev.to/bytebricks/unleashing-the-power-of-wherehas-in-laravel-jip) magic? Or that time we embarked on a data-scraping quest with [GPT-3 and Cheerio](https://dev.to/bytebricks/cheerio-chatgpt-a-primer-on-web-scraping-with-nodejs-4klf)? Well, WireUI fits right into this narrative of efficiency and elegance. It’s about having the right tools at your disposal to transform ideas into reality, without getting entangled in the nitty-gritty. With the Laravel ecosystem continually evolving, who knows what exciting concoctions we’ll stir up next?