Bootstrap to Tailwind CSS: Experiment Demo with Laravel QuickAdminPanel
Вставка
- Опубліковано 7 сер 2024
- We made an experiment and converted a recent demo-project based on the CoreUI Bootstrap theme into a Tailwind-based theme. In this video, I will show you the difference and talk about the philosophical distinctions between Bootstrap and Tailwind.
Repository: github.com/LaravelDaily/Quick...
- - - - -
Try our Laravel QuickAdminPanel: bit.ly/quickadminpanel
Enroll in my Laravel courses: laraveldaily.teachable.com - Навчання та стиль
As a mix of bootstrap and tailwind I recommend bulma. Its easy/quick to learn, small (for someone good and others bad) and very simple.
As a backend developer who doesn't have much designing skill, tailwindcss is awesome (for frontend) but while working on the backend part I dont see myself using tailwindcss anytime soon.
As Tailwind is now the preferential option in Laravel (Jetstream has TailwindCss) I migrated to it just have the knowledge. After a while working with it I feel more comfortable and won't go back to Bootstrap. It's true that at the beginning it seems you write more code, but you do exactly what you want, and little by little I've built a little library with components with my most usual items and now I'm as fast as with Bootstrap but with much more control.
Tailwind looks nice in theory, I even tried it in my small Symfony project. Then I realised the reason why I used Bootstrap is because my designing skill sucks. Tailwind is just CSS with extra steps. But I can see how it can be powerful for those who is already have the skills to design a good UI.
Tailwind is awesome. Its so much easier to customize everything. Bootstrap feels limited
@@kentuckymn4367 bootstrap really helpfull when you only have short amount to build a project. Btw, I prefer use scss than tailwind when have much time, i hate that long classname.
But if you are gonna work in a company you don't have to design...there will be designers and they would ask you to do exact website and that's where this is useful...
I was a boostrap lover... but when i discovered tailwind, i'm tailwind lover....
a trick: watch movies at kaldroStream. I've been using it for watching loads of movies recently.
@Zain Nicholas Definitely, have been watching on kaldrostream for months myself :D
My opinion is Adam Wathan is great man and everything he touches is blessed!
you are amazing instructor, I am one of your follower, the good thing that you provide examples and explain
I have replaced ~95% of my Bootstrap code with Tailwind. I used Windy to create the initial Tailwind code and then modified/enhanced it as I learned more of the Tailwind capabilities. I also use some of the code from TailwindUI as a starter for my new forms or enhancement of existing forms.
I liked Tailwind for a number of reasons, some that you stated in this video.
- Some of the code generators make it much easier and quicker to create the required Tailwind code
- The 2 you mentioned and Windy.
- Tailwind is enhanced and updated much more frequently then Bootstrap. It also feels as if Bootstrap's maintenance is an after thought, OR when the "owners"
can find time in their schedule to work on it.
- Tailwind has full-time staff working on the code as does TailwindUI
- The Documentation for Tailwind is clean, crisp, and fairly easy to follow.
- The documentation includes plenty of well done educational videos.
The bad that I have found is:
- Seems to be fewer Tailwind templates then Bootstrap.
- There are fewer examples for Tailwind.
- Initially, the syntax is longer, but as you explained, there are ways to make the code appear shorter and reuse the code.
- Realistically, you can take a very similar approach with Bootstrap.
As always, THANK YOU for creating these videos! I can always count on learning from them and helping my app perform or use a different/better approach.
I learned that Tailwind was gaining popularity but I was not motivated to start using it. Then I started to build a Laravel Dashboard from spatie.be and it uses Tailwind. This time I took the time to learn about it and I love it. I started to convert my complete project to Tailwind CSS and it took me some weeks. The most powerful thing about Tailwind is that you can easily 'search' for the right setting. You can easily switch between text-gray-100 to 900 and test the looks very quickly. One important benefit for me was the responsiveness. Creating a table with bootstrap always left me with overlapping columns. Tailwind responsiveness just works perfectly with all utilities. Leaving Bootstrap also says goodbye to stuff like popper.js and introduces purgeCSS which leaves you with a minimal Tailwind CSS file with only classes you use. One problem was that many packages do not have a Tailwind theme yet. Like the jquery select2 dropdown selectbox with search input. I migrated the theme myself to Tailwind and it even looks better than the original theme that comes with this package standard. Go Tailwind CSS!
Great explanation!! Thanks!
I started to use bootstrap mainly because of the grid system that it provides, but when I started to toke care of the size of the css I created my own "framework" with the same logic of tailwind, but far less complex. By the time I didn't knew that Tailwind even exists. When tailwind came to my life I'd already had the mindset to work with it, It was a matter of learn the new classes, that where very similar to the ones in my approach. In terms of weight the purge function makes it perfect. I think as developers we have to evolve and at this point Tailwind represent the new wave. To me Bootstrap is what Jquery is to the Javascript development wright now. Speaking of design, the popularity of Bootstrap made most part of the websites around the globe look very, very similar. With tailwind you have much more flexibility and you can make it your own. Makes it easier to go from any UI design from Figma, XD, Sketch or whatever, to the html-css layout. I think it's the way to go.
Don't know why but Tailwind CSS makes the front end look more fresh than Bootstrap. Huge fan of Tailwind CSS
Helpful 👍
I can't say which one I prefer or which one is better. for some projects bootstrap is the best choice while for some other projects tailwind is the way to go. for both tailwind and bootstrap you can use webpack to reduce the size and just load what you use and I see no difference in that cease between those two. it's more of a choice for most of the projects to which one to use in my opinion.
I use Tailwind for all my new projects (Laravel & Vue stack) and I don't want to come back to Bootstrap-like frameworks. Also when searching for some CSS UI libraries I'm finding myself in dissapointment, because many of them based on Bootstrap or something related. The pain of customization issues of those libraries stops me of using them 🙂 I don't want to give up the freedom the Tailwind grants.
I use tailwind and alpine js together for my test projects and while I like the utility classes I tend to avoid using tailwind for rush projects since I find implementing my own dropdown and modal components in tailwind a chore.
You can just copy and paste modals if you are good it should not take much time
thanks sir.❤️
you can use with bootstrap only those components that you need
for example:
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities/spacing";
@import "~bootstrap/scss/utilities/flex";
@import "~bootstrap/scss/utilities/display";
@import "~bootstrap/scss/utilities/sizing";
@import "~bootstrap/scss/utilities/text";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/pagination";
As a backend developer i use bootstrap for the front end as i am not able to design something cuz i suck. I usually have the bootrstap core css imported and if i want to change some design stuff i will usually have a site custom css file where i have the class of bootstrap i want to change and i simply overwrite that class.
Hasn't tailwind just re-invented traditional CSS? i.e. specify classes in your HTML, and then write CSS in your stylesheets. It seems like the only advantage is it might shorten the syntax. Luckily they have documented that exact thought tailwindcss.com/docs/utility-first#why-not-just-use-inline-styles
The idea is utility-first. They specifically mention in the documentation that you should use tailwind with a component framework like React, Vue, etc. The idea is that you create re-usable components in these frameworks and apply the utility-classes just once.
Tailwind is the current shiny object. Slightly better than inline CSS. This will cycle back to bootstrap after 2 years. Though it will be better to improve your typing speed.
Great work. I more like Bootstrap because it is easier in my opinion. I have a little question: can you tell me how to create the buttons on each menu, like (print, excel, pdf)? Thanks again
It's a part of datatables.net library we use, read their documentation
@Povilas Korop if possible please make a detail video on "How to contribute to open source project on Github" may be any Laravel package.
@@PovilasKorop Glad to get your reply and thanks for the information.
Could the fact that Laravel 8 uses jetstream push the use of tailwind instead of bootstrap? Or will it push Laravel even further towards using exclusively backend?
Good question. Both, I think. Tailwind will get more popular, no deny. And also there's Fortify which is front-end agnostic Auth.
Once you componentize your code like jet stream it becomes a breeze and highly customizable.
Hi, I have one doubt is it possible to convert a (react+bootstrap) project to a (react+tailwind) project. without impacting any features or functions in the project. Please let me know. Thanks in advance.
Possible? Yes.
How to do that? It's manual and custom work, depending on tailwind/bootstrap design differences.
Sir, how to migrate laravel bootstrap 4 website to tailwind css
With one of the tools mentioned at the end of the video
Hi. I love your videos! Very educational and very good use cases to understand! I have a question. I want to write some social media functionality. Basically you have your start page and you see your feed full of posts. These are posts from other users (friends) from groups (membership) and posts with hashtags. I had the user-to-user subscription but I reached some limitations there. I ended up with UserPost, GroupPost and meshing in other posts with hashtags. That was a mess. I want to try to do it with channels. If you or anybody else know some package or how to solve that with relations that would be awesome!
Sorry, but I don't think there is a package or a tutorial that would build the relationships for you exactly as YOU want them.
I like Tailwind approach/philosophy but I need Bootstrap components (popper, modal, dropdown, accordion, etc...).. it'd be nice if they can be used together right out of the box
Well I think there are already some Tailwind UI kits, so you get the best of both worlds.
Hi! I had the same query like you. you can use both in the same project, just add a prefix 'bt' to bootstrap classes like 'bt-btn btn primary'. Now classes with same nme in bootstrap & tailwind will not conflict :)
can you make video on Multiple authentication using Fortify and Laravel UI
What exactly do you mean by multiple authentication? Multiple of what? Can you give an example? Because I see a lot of people mixing multiple guards with roles-permissions system.
Laravel and nuxt tutorial??
Purgecss also works with bootstrap/webpack
Tell me more. Reducing bootstrap size would be amazing
@@seanglendinning3281 I assume you use laravel, so for laravel mix use this github.com/spatie/laravel-mix-purgecss, adding 2 lines of code to webpack.mix.js outputs a 12.8kb css file vs 142kb on a fresh laravel project with laravel/ui.
Exactly, but if you are adding classes using Javascript, purgeCss can't see them and removes them. You need to whitelist them
It would be nice to have a tailwindcss generator!
Try Windy.... It will generate Tailwind code from an existing form, or part of a form. Plus, there were 2 packages mentioned in this video that may also help you.
Downside is the lack of datepickers tables and stuff, i think tailwind UI is a little pricy for the amount of things it has as of now, maybe in some months the internet will fill with free components.
Good stuff.. could u do lumen realted videos ?
I don't work with Lumen, I don't recommend anyone to use it, for me I see it as abandoned framework.
@@PovilasKorop your reply just made my day, lol, thank you
@@PovilasKorop thank you for ur advice bro
@@PovilasKorop In my company, they doing micro services with help of lumen... what u suggest then ?
@@thansurya You can do micro services with Laravel, as well.
Once you get used to tailwind, going back to bootstrap is real headache. Using tailwindcss 2 years now. You didn’t mentioned tailwind configuration capabilities, this is most important part to understand when using tailwind. Also it is not recommended to use lot apply directives, use components instead.
Hello. I will report a small bug when i use quickadminpanel->laravel 8->AdminLTE V2 and V3 with Systemcalender. It will not show the entries in the calender. Have a great day :)
Thanks for reporting! Just tried it myself with Laravel 8 and AdminLTE 2, works for me, shows the entry: drive.google.com/file/d/1J54PPe90YMD-9WkhBof8aHj68l5RQd0R/view?usp=sharing
Email me povilas@laraveldaily.com with more details on which panel it is, attach a screenshot maybe, and then I will investigate.
Povilas Korop Hello Povilas. Maby its the clone function. I cloned a coreUI project in to adminLTEv3 and 2. After that it will not show the entries :)
I tried tailwind it’s utility not a language its hard to maintain
In my opinion tailwind is just writing css but you don't need to create any classes because all the classes are built by tailwind. So if you are really good at writing css then you can choose tailwind otherwise it's a no go.
Naahhh. Tailwind is soooo much better imo. Bootstrap seems limited
That's right Ancelotti.
What I don't like about tailwindcss is that it does not really document what it does, it only shows which css is behind each class. So you have to know css to understand what it does. Why not write css directly and not learn tailwindcss then?
People will take time to adapt to Laravel 8 Jetstream. So much bloat. To add more salt, tailwind replaced bootstrap. Beginners take to Laravel because of its easy approach.
Imagine 1 year later you need to maintain a template using atomic styles like this, what a nightmare, you need to figure out every combination of these called utility classes in every element :smh
IMO, for Tailwind we need to use the UI kit like Tailwind UI, not writing these atomic classes one by one, and Tailwind UI is like Bootstrap so it's actually the history will repeat itself.
Bootstrap is for crappy UI devs like me, tailwind is for UI sensei.
Bootstrap is easier to learn, less options. Tailwind is more advanced with more options. Bootstrap is easier for the noob, tailwind isnt. Once you learn both, tailwind is >>>>>>bootstrap. Imo.
Nope tailwind easier than bootstrap or any other css framework (if you want customise design you should use tailwind or you have theme / template and don't n need custom design then go with bootstrap