Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

bestmomo's avatar

Do you really like Tailwind and Livewire ?

Since Laravel 8 there is something weird with Authentication stuff. The TALL stack is arrived with Tailwind and Livewire (or Inertia). Of course we can still use the package laravel/ui even if at the start we had announced its death. I must say, but it's only my my point of view the direction taken in the management of the frontend is problematic. When i started web development a long time ago we were trying to keep things separate. Now everything gets mixed up.

For me Tailwind is too verbose and I really don't like it. On an another side Livewire is a useless tool that generate complexity and also many useless request. For me frontend and backend must stay separate. Jetstream is a wonderfull package but I'll never use it because of these technogies.

On the other hand Fortify is a very interesting tool which simplifies the coding and I think that laravel/ui package should be updated to use it. In my projects I will be moving towards a solution that creates a layer on top of Fortify, like Jetstream but without all that complexity and with a healthy separation of tasks.

We don't need all these Javascript Libraries like Angular, React, Vue unless we want to create a SPA application. Web browers API are now very powerfull to awoid thses libraries for casual reactive tasks.

To illustrate what I say there I've create a Jetstream like application with bootstrap and vanilla Javascript with : registration, password reset, email verification, user profile informations, password update, 2 factor authentication and account delete.

I kept the principle of a single page for the user profile (to stay in the spirit of jetstream) although I would never do such a thing in a real application, it is much more user-friendly to present a page with access buttons and light pages for each feature.

All this is still quite fresh in my head and I would like to have your opinions and reactions.

0 likes
44 replies
jlrdw's avatar

I use fetch js and regular js. Tailwind of course is css. I normally write my own CSS where needed and use bootstrap.

I don't see why any of this stuff is scaffolded or included. If a developer wanted to use livewire, they could install it.

I like the PHP framework I'll leave it at that.

And I know you've been around since the beginning also since the version 4 good ole days.

And to answer your original question, no.

Talinon's avatar

@bestmomo I'm currently asking myself this same question. Not so much why it's scaffolded into the Laravel framework - imo, this is a mute point. It's there for convenience. Laravel is not forcing anyone to use it.

Back to Tailwind / Livewire... as a full-stack developer, there are obviously things about Livewire that excite me. The idea that I can focus less on javascript and store state in the back-end is a marvellous idea. Although, like you, I seem to have a hard time accepting the fact it's making so many damned requests to the backend. It's really the only thing that is holding me back from fully embracing it.. yet, it seems like many in the community have adopted it with open arms.

I think it comes down to what's the right tool for the project. If you're designing something that takes minimal reactivity, then reaching for Livewire might be a solid choice, and saves yourself a load of time. If it's a highly reactive page, with lots of traffic, I'm still not sold on whether this is a good solution.

I'm starting to be won-over by the thought of Tailwind CSS. My first knee-jerk reaction was that it muddies up the markup where at first glance, it looks ugly and verbose. On the other hand, writing my own CSS is time consuming, and using a CSS framework, I find I often back myself into a corner and need to start fighting the framework every time something out of the ordinary happens. To approach CSS in a utility-first way is more and more appealing to me. I think it's just something that I need to get accustomed to, then eventually it would become first nature.

The bottom line.. I think I desperately want to like both...

3 likes
thewebartisan7's avatar

Seem that I was reading my own thoughts :) But I even don't like Fortify, I think that Fortify is main problem.

I also make a month ago a fortify UI with all features as jetstream, but as a package, so it's easy to install. But it was frustrating. Once I hear that laravel ui will be still mainteined I do the same but with laravel ui, much quicker as I already know where to put my hand.

Here is final result https://gyazo.com/75d46b386d7d3cec206fef967b4bd4c4 Everything is ajax, from form submission to navigation with turbolinks 5.

I agree also about tailwind, and with coming bootstrap 5 there is also way to create utility classes as you need. So is good mix of components and utility. Apart Adam tailwindui I can't find something good with it. But I will try again to work with it as when I have time.

I notice that you create two factors controllers, but since you are using fortify, you can use their own: https://github.com/laravel/fortify/blob/1.x/routes/routes.php#L121-L134

And I would already use bootstrap 5 so you don't need jquery. It will be released in December as currently planned.

gitwithravish's avatar

I completely agree with @talinon. The idea of livewire and tailwindCSS would have come from somewhere right? People who has developed these frameworks are industry professionals and they know what they are doing. They ain't stupid. We should try to see them from their creators' perspective. Livewire and tailwind might not be an ideal solution to any type of web app, but they have a very great use case in specific scenarios.

These are just tools and not ideal solutions. By the way it is also on you if you can use the powers of these tools and make the best use out of it.

thewebartisan7's avatar

Yes I agree that with vanilla js you have to write a bit more code but in the end is faster.

But you could create your own small wrapper around most common DOM manipulation that you are using in your project.

Or use some existing, there are several. One of most near jquery API is:

https://github.com/fabiospampinato/cash

It's most probably that most of your jquery code will work with cash without need to change anything.

About fetch I still prefer to use axios because it has several features out of box.

Snapey's avatar

There is a few misconceptions here.

Livewire only makes the requests you ask it to make. It's perfectly possible to make a form that only sends one request when you press submit. You can then send the result back to the client for immediate rendering or redirect to another page - just as you would pre-livewire.

But suppose you want to check the username is available as the user types it (for example). Now you are into binding the field to some javascript function, and then creating an endpoint that you can call with axios, and a controller function that will check the availability of the name etc etc. All this requires you as a developer to make lots of decisions about architecture and naming, not to mention the context switching between javascript and php.

Livewire takes a lot of this cognitive load away, and does it, not at the cost of extra requests, these requests would be needed if you wanted to provide real-time feedback to the user.

Jetstream is a 'bolt-on'. It is not 'scaffolded into the framework'. People are upset because their preferred scaffolding seems to be being pushed to one side. Well this is how I felt for the last 2 years having to remove bootstrap from projects. It's not something to get worked up about. It's not the framework. It's a convenience.

As for Tailwind - don't knock it unless you have tried it. Again, the speed it gives me as a developer is incredible. Again, the cognitive load of just choosing class names for instance, and not having to worry about the knock on effects of changing an existing class is incredibly freeing.

When I look back at my old projects I shudder at the similarly named classes that I had to duplicate and change because I was not sure the effects of changing existing classes - or I was not even aware of their existence.

However, for those that say that you end up with cluttered html, you have two options;

  1. extract your utility classes into regular complex classes. Just build them with tailwind utilities instead of base css.
  2. create laravel components that contain your utility classes and ensure consistency across views.

Personally, I'm not changing back any time soon. I happily sponsor Caleb because I save so much time using Livewire, and this makes my projects more profitable.

13 likes
pSouper's avatar

I second this almost to the letter. Livewire is lightweight and plays well with others. Tailwind is awesome. It has power to pre-process only those classes you actually need. It is super-simple to use in-line within your blades as its memorable naming convention means you just "write what you want" to style elements almost as quickly as you can think of what you're trying to achive: "text-lg text-red-500 bg-green-200 hover:bg-green-800 hover:text-white border-dashed border-4 border-light-blue-500" - ok, so that's not going to look good but you can quickly see what it's going to give you - easy to read, easy to write. when combined with laravel's components it all but replaces the need for css classes all together.

#notGoingBack

1 like
bestmomo's avatar

@talinon

If you're designing something that takes minimal reactivity, then reaching for Livewire might be a solid choice, and saves yourself a load of time.

If there is minimal reactivity there is also minimal Javascript so why Livewire ? Not sure it save lot of time.

To approach CSS in a utility-first way is more and more appealing to me.

Also appealing to me I think

@thewebartisan7

I think that Fortify is main problem.

I hadn't seen it that way but I have to think about it.

I notice that you create two factors controllers, but since you are using fortify, you can use their own

I created these 2 controllers to simplify frontend code, sending all pretty DOM with request. Like you i'll use Bootstrap 5 when it's done ;)

@gitwithravish

I don't say Livewire and Tailwind are stupid, there are great tools, I just wonder about their utility. i am free not to like them and to think that simpler coding is often better.

@jlrdw

Always happy to meet forum veterans ;)

@snapey

But suppose you want to check the username is available as the user types it (for example). Now you are into binding the field to some javascript function, and then creating an endpoint that you can call with axios, and a controller function that will check the availability of the name etc etc. All this requires you as a developer to make lots of decisions about architecture and naming, not to mention the context switching between javascript and php.

It's a good example where Livewire can save us a lot of time but it's not that common.

On the other hand you seem really excited to use Livewire and for me enthusiasm is a great sign.

As for Tailwind - don't knock it unless you have tried it.

Ok I'll go further in this way because I read a lot of positive reviews on the subject.

thewebartisan7's avatar

Snapey I see that you can disable all requests of Livewire and reduce to single requests but then that become like normal ajax form submissions that you can easily do via JS with a few lines of code, for every forms, not just for single form, by creating a generic function that can be re-used. So when I create new ajax form, I don't write anymore new JS code, but just adding a data attribute such as data-ajax-form and then I have an event listener that process all forms with this attribute. And I can add extra code via on success event if I need.

Almost every JS code that I write can be re-used, so you end up without writing any JS code but only using HTML5 data attributes for initialize and configure the code.

About your example of username, there is a package that I used in past laravel-jsvalidation that allow to do remote validation for any field you want without creating a new endpoint and without writing any JS. Right now I am not using it since checking an alternative without jquery. But I mean is that something like that was already available. And even without this package you can archive the same by passing to server an extra param like validation=true and then on server side validate only field in the same action, something like you do with Livewire for validate single field using a method. Similar method you could have in controller, called by action when found param that you define.

I will say an obviously thing by saying that Livewire is written also in Javascript. And that you don't need to write anymore Javascript is not totally true. If you want to reduce server request like for open a modal, then you need to find a way via AlpineJS, which is not totally easy to understand and use. Yes for small interaction, but when you need to deal other plugins often become hard to manage.

I saw also all video of Caleb. Even if his videos are nice to watch, they raise even more questions regarding Livewire. For example his last video of datatable, you see that he make a request for every single interaction such as open a modal, toggle filters, etc. Then he said in video that this can be done via AlplineJS but why he don't do that? Just to show that everything can be done without writting any JS. Ok but this raise other problem with too many requests. Because all this status must be sent to server to livewire component to be aware of current state in order to hide/show and prepare variables. Then he end up with some caching of database query using component ID. I am not sure how much are this performante since that ID is unique for each request. Having many users using the same component would not make happy sysadmin.

I want to not being misunderstand, I am don't want to speak something against Livewire to not offend who love it, also much of respect for Caleb. But it's not a good solutions for every developer. For many others can be something awesome.

Regarding tailwind, the first solution to extract utility classes go against the concept of framework, if you do that then you are basically doing what bootstrap already offer. While second solution using component, apart that this make you create a single component for each element you have, for example Jetstream has even for single link in menu, ending up with 90+ views loaded in single edit profile page. But another problem that this second solution seem can't solve is when you need to override single or a few classes of a component. Example you want to change a background color, and so also text color, and let say padding. Using attributes->merge you can't override classes in component, you can only add new classes. This will end with a lot of classes in several views and not local. Marcel Pociot make a video regarding this by proposing a solution, but this seem still not yet updated, see https://twitter.com/marcelpociot/status/1310935864848117760 Another thing is that often you need to create multiple elements in single page for mobile and desktop, this for example for menu, as also Jetstream is doing. Having a large menu, is a lot of duplicated code.

The principle of CSS was (and I hope continue to be) that you have single CSS files that you share across many pages, and by just changing them you don't need to change HTML, csszengarden.com is perfect example of this. With tailwind seem opposite, you never change CSS but you need to change HTML. But this raise problem above.

Someone claim that you just work with classes and not anymore with compilation etc. But if you want to get full potential of tailwind you need to setup your classes in smart way using configuration file, extraction etc. This is not only changing of classes anymore.

1 like
laracoft's avatar

I think Livewire takes the design work out of AJAX. Using AJAX in the past, I have a slightly different way of updating my DOM for different requests and that made it horrible work to maintain.

I'm happiest when it is just Twig/Blade (HTML, CSS) + PHP (including Livewire) and bits of JavaScript/Alpine, e.g. http://fancyapps.com/fancybox/3/

At the end of the day, our aim is to reuse code. I don't see any reason to throw out JS just because we used Livewire and Alpine.

bestmomo's avatar

@thewebartisan7

The principle of CSS was (and I hope continue to be) that you have single CSS files that you share across many pages, and by just changing them you don't need to change HTML, csszengarden.com is perfect example of this.

I also hope continue to be ;)

wingly's avatar

I personally love them both!

For me tailwind came naturally, as I found my self doing the same thing basically in all my projects, writing flex utility classes etc. I feel that it fits nicely with any component based frontend design I was involved. Building pages became so easy and fun. I can imagine that bootstrap like frameworks build on top of tailwind will start to come to life soon enough https://tailwindcss.com/docs/extracting-components#writing-a-component-plugin

For Livewire I had my concerns. You know initially feels weird. What are all those requests? Then I listened to Rich Harris talking about how we should be building stuff in the "modern web", "dissing" phoenix live view etc and my doubts became bigger. Then I tried it out, build a project with a tight deadline and I was blown away with how fast I got stuff done.

I still mainly work with Vue (and love it) but I would as easy choose livewire/alpine for the next thing I build, if it make sense to use them.

For me both of them found a place in my projects and feel grateful that I have those powerful tools in my toolbox that I can reach anytime I need them :)

akc4's avatar

I only recently started getting into Laravel (2 weeks before Laravel 8 release), and I was overwhelmed with Livewire, Tailwind, Inertia when Laravel 8 was released and wanted to quit. But, I stuck around and oh man was it worth it! Not only did I get to take a look at livewire, tailwind, but also VueJS. I am addicted to vuejs now and I can't talk myself to ever going back to bootstrap now that I touched tailwind css.

ollie_123's avatar

I started using Laravel last year and built a few projects with it using Laravel UI, BS along with writing my own CSS and most of the time overwriting BS existing classes and knew where i stood and loved the framework as a whole.

Moving to L8 was a bit of a culture shock for sure with Tailwind as the primary CSS option & Livewire which i had never tried before. At first the idea of having all of those Tailwind classes in my HTML turned me off but after giving it a go for a few hours, i loved it! Its actually much faster to scaffold your app and its so incredibly refreshing to not be having to constantly override BS classes and dip in and out of CSS. Don't get me wrong i love BS and think its a fantastic framework but i'm just really enjoying writing classes on the fly. And as @snapey said, putting all of your reusable TW CSS into components just makes things easier in the long run, cleans up your markup & gives you uniformity wherever the component is used.

Livewire i had never used before, had dabbled with Ajax before & tried Vue which i found pretty complex but for me personally, Livewire is fantastic and Caleb has done an incredible job. In terms of complexity, i wouldn't say its any more complex than your traditional Model, Controller & View.

As with anything, change is something we're not always in favour of but change can be good. Not sure if anyone saw the Jetstream Discussion video by Taylor the other day but everything included in L8 was requested by the masses and he also said he would be supporting Laravel UI for a long long time.

For me the new decisions were/are still a learning curve but i'm definitely in favour of it.

Atef95's avatar

I don't think laravel is forcing any scaffolding.

at the beginning it made up a little argument with the community and Taylor cleared up the misunderstanding..

Laravel is providing you a lot of options to build your web app..

I'm in love with livewire because it saves me much much time and I also stick with Vue You have inertia , Alpine... You have many many options so just stick with whatever makes u comfortable..

bestmomo's avatar

@atef95

I never said that Laravel is forcing any scaffolding but it still strongly encourages. I can read on readme of laravel/ui :

This project is a very simple authentication scaffolding built on the Bootstrap CSS framework. For something more robust, consider Laravel Jetstream.

I do not deny the quality of the new tools used and I must congratulate their creators, I just asked who likes them, and as a bonus why. I'm happy to read all these various answers.

Personally almost the more I study them the less I like them. I irreducibly separate frontend and backend. I also separate the structure from the presentation as much as I can.

vincej's avatar

I am a programming intermediate. To that end, I have a wholly different perspective on this discussion. For me I am heads down everyday trying to build working software for my user. Who, frankly does not care what I use, so long as the system performs for them.

For me, the single biggest cost of doing business is learning and integrating new technologies. The marginal benefit of using LiveWire over JS / JQuery/ Ajax or Tailwind vs Bootstrap must be definitive and unambiguous. Yes, these technologies are very attractive, and yes I dislike writing endpoints for Ajax calls. But I have thousands of lines of Javascript / JQuery already in place. The cost of evaluating new and adopting new technologies must deliver a real and overwhelming benefit to justify the cost of adoption. To that end I will have to stick with Bootstrap for the next generation. And yes, LIvewire could have a place for me, as it's adoption appears not to be very large. But Vue ? Forget it. Not because it's no good, but because the cost of adoption is just too great. I have my hands full just keeping up with Taylor. Cheers.

1 like
Talinon's avatar

It's true that Livewire components takes on more responsibility and blends the frontend and backend. It essentially eliminates the need for a controller, instead containing business logic while having its own knowledge of state and presentation.

But... If it dramatically improves workflow, saves time, and fits the job.... who cares? From what I've seen and read, it looks like Caleb has done a fantastic job, and deserves a lot of credit for his innovation.

Just to regurgitate what has already been said, I think it makes an excellent tool to have in your toolbox. You may not always reach for a hammer for a plumbing job, but some other job might call for it. I think Livewire would be of great use to a single developer working on a reactive application. If you work in a team, or have dedicated frontend/backend teams, there might be less consideration for its use.

There have been some compelling arguments in this conversation. I'm going to start using both Livewire and Tailwind on an upcoming project, and to be honest, I'm eager to try it out.

1 like
Snapey's avatar

Looking at a project today for a client. Bootstrap 3 AND a 3000+ line css file with one class per line.

a small sample

.headTxt{float:none;width:100%;margin-top:15px;}
.personnel.resource.cMaterial{background:#57595b;}
.personnel.resource.lab{background:#ce2449;}
.left-course .whatList li.welcome h3{font-size:22px;}
.gdpr-List.newsFeedList li .profileDiv .contentWrp .readB{margin-top:25px;}
.innerService .serv li h2{font-size:24px;width:90%;}
.innerService .serv li .block h4{font-size:22px;}
.emp-Info .imgWrp{display:block;float:none;margin-right:0px;margin-bottom:10px;}
.syllabusList .whatList.moduleList li h3{font-size:22px;}
.syllabusList .whatList.moduleList li h4{font-size:17px;}
.syllabusList .whatList.moduleList li h4{margin-bottom:10px;}
.targetList{width:100%;}
.faqData li{display:block;width:100%;margin-right:0px;margin-bottom:15px;}
.dropdown-content {top:30px;}
.courseData.trainingCourse.landTrain .left-course .course-tab.article-course{min-width:auto;}
.video-Lab.secvideoList .rightLabList.LabListDetails .labList li {width: 32%;}
.video-Lab.secvideoList .rightLabList.LabListDetails .labList li:nth-child(5n){margin-right:1%;}

All I hate about CSS in one file.

Just wondering how I can convince the client to cover the cost of switching to Tailwind (or say bye).

KevinMcKee's avatar

This file is so silly. I never wrote my CSS like that. It’s obvious many those classes are used in a single place.

Before tailwind I used a lot of styles directly on the element. I love tailwind because now I don’t have to do that and I still get to avoid this nonsense.

Snapey's avatar

@kevin_mckee I agree, and you just reminded me, god those horrible specificity issues. Just add another prefix and see if that fixes it? I've not thought about specificity in 2 years (shudders).

vincej's avatar

@snapey Given that you love tailwind so much I am seriously going to give it a try. However I don’t class myself a designer and so therefore I could see myself simply using the default layouts given by tailwind. Which then makes me wonder well I’m only using the default designs from bootstrap? So I’m not sure how a gain. Furthermore inversion five bootstraps got utilities I presume similar to tailwind. But I will give it a try.

jlrdw's avatar

@vincej it boils down to tailwind is just to Style with css. It makes it easier also to design quickly for desktop and mobile. But if someone already had a bunch of media queries already written, almost don't need Tailwind.

As for Livewire, I played a little with it, but I'm happy with my fetch js. With fetch nothing to even install.

vincej's avatar

@jlrdw @snapey I just had another look at the tailwind website. I am put off by the reality that I have to spend $US250 to have features and components which are included in Bootstrap 5. Moreover Bootstrap 5 is utility driven.

BTW - I have been on Laracasts since version 4 as well .... just sayin' :o)

Snapey's avatar

Hi @vincej

Tailwind CSS framework does not give you any layouts

Dont confuse it with TailwindUI which is a paid-for product and provides layout components using tailwind css

composermark's avatar

My 2 cents - beyond anything these wrappings can or cannot do - I'm a strong believer in an engineering methodology that allows anyone to follow and extend, without having to wade through someone's unique approach to scripting, or CSS or anything else. I also think Tailwind is an inspired approach to styling - sorry if the old guard have to learn something new - but that's how it is. And clearly there is no validity to a complaint about the number of requests Livewire or Vue make - since these things are perfectly controllable case by case.

By their very nature, PHP, Javascript, CSS are highly verbose, yet are asked to do the same types of functions again and again. Hence there is a clear need to create a generation of encapsulating frameworks to simplify those processes and functions which are both ubiquitous and predictable.

If you have to change the way you've done things, I sympathize. But I think there has never been a better time to learn coding for apps if you are starting from scratch. In a few more years, we won't even have to bother with learning Laravel, Tailwind or JavaScript at all. We'll be able to type or say ordinary language for what we want to see on the screen - and an AI algorithm will be able to take care of it. Primitive examples of this are already available. They may even work if you are using broken English too.

bestmomo's avatar

@composermark

I also think Tailwind is an inspired approach to styling - sorry if the old guard have to learn something new - but that's how it is.

I am a big part of this old guard because I started development in 1980, at a time when many participants in this forum were not yet born. In other words, I have learned new technologies many times and I have no difficulty with that.

The initial question is about liking or disliking these novelties, not whether they are relevant, useful or futile, fleeting or doomed to last. But the ensuing discussions are interesting.

jlrdw's avatar

@bestmomo just my opinion, but look at it like this.

When Vue came out, the attitude was oh wow that's it, it is the best.

Now Livewire seems to be a Hot Topic, you don't see as much raving over Vue.

But in my opinion only when both these fade away jQuery will still be going strong.

Though like I said I've switched a bunch of stuff to fetch Js.

As far as Tailwind, there's nothing to Rave about, it's just CSS. Normal CSS is very easy to write.

And I'm an oldie also, started with dbase 3, in the 80's.

vincej's avatar

@jlrdw @bestmomo I'm with you age wise!

Like you I've never found a challenge in writing CSS or SQL or JS, or JQuery. But having to learn new technologies just because this year they are cool, for me, detracts from my primary objective: delivering value to my customer. Unless the cost of learning pays for itself in increased productivity, then, I do not see the point, beyond being "current" with the cool kids.

Tailwind looks cool, but so far I do not see how it delivers material benefits over Bootstrap 5. Over Bootstrap 3, sure thing. But that is solving a problem that does not exist anymore.

I know nothing about Fetch, but if @jlrdw loves it, then that is enough for me to look carefully at it, as yes, Ajax is a pain.

jlrdw's avatar

@vincej I have something to do now, but this evening I will make a Github gist example and post a link, @tray2 is the one who got me using fetch js. It's great for an app where you are just using some js / ajax for some enhancements.

Next

Please or to participate in this conversation.