Это видео недоступно.
Сожалеем об этом.
Vanilla CSS vs Bootstrap vs Tailwind CSS - Which one should you choose?
HTML-код
- Опубликовано: 27 июл 2024
- Should you use vanilla CSS (no framework), a component framework like Bootstrap or a utility framework like Tailwind CSS? All three approaches allow you to style your page but there are important differences you must consider when making the decision. Here's a detail comparison between Bootstrap, Tailwind and "just CSS".
----------
Dive into our "CSS - The Complete Guide" course: acad.link/css
Finished Code: github.com/academind/css-vani...
Want to learn something totally different? Check out all other courses: academind.com/learn/our-courses
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Tailwind is really great for prototyping, that is when you want to try different styles on the go, and don't want to write all the css manually. First, it saves your time without limiting your styling options too much, like Bootstrap does. Second, you can learn a lot from the Tailwind classes you used throughout the prototyping phase and define correct patterns for your own styles, so when the time comes to create your own “btn” and “btn-primary” you'll know better what goes where for the particular project.
This is very helpful. Thank you.
Agreed. But also, you can try to learn css best practices of naming things such as BEM. Understand how to organize your css files or if you should use a pre processor as Sass would be a great call too, because in the end of the day frameworks as Tailwind does it for us behind the scene
That is true, I learned css because of tailwind specially the layout, because its docs and cheat sheet.
@@iuripires7285 This guy knows what's up. Tailwind is a crutch on larger projects, learn the basics and BEM and you will be on another level.
Dammit Max, I'm an Engineer, not an artist! Now gimme the bootstrap.
lol
God bless you. Came from reading boring Wikipedia page and articles to this video. You are 1000X better at explaining what Bootstrap is. 👍
I love using vanilla CSS, I just love seeing how things, styling are done at the core level, of course that is only for me, framework are great, it makes job done much faster.
I totally agree Richard. It's good to know that we have other ways like frameworks to create our styling but in the end everybody should use the tools he prefers.
Even I like Vanilla CSS because it is more flexible for me to create design in Vanilla. I don't know about other.
Glad you've been doing videos over style/CSS, it's something so easy to overlook or otherwise screw up.
Happy to read that you like these videos Josh. I also think that styling websites is definitely an important topic, that's why we wanted to add content in this area here on the channel and on Udemy.
well explained, thank you!
i work with Vanilla CSS and i heard about Bootstrap many times, and ignored it because i thought it's another language that if i want to use it i have to learn it, now i know what it is and i know it's not something i want to use because i prefer to style on my own
I use vanilla css for all my projects. It is time consuming but i prefer the freedom to create my own style sheet and keep my markup clean.
Definitely a fine approach, it always depends on the personal preferences/needs. But if you want to have the highest level of customization options and the entire control of your code, vanilla CSS in the end the only solution for that.
Sniperyork, did you look at tailwind in-depth? It allows you to compose your own styles from theirs plus your own simply using the @apply keyword. So your markup would stay clean while more compact than vanilla. Another thing I loved is you can indicate screen size for responsiveness in-line with your css or theirs.
You can just import the parts you need from bootstrap and only use that leading to a less bulky outcome. I use scss with custom CSS and Bootstrap and it's great.
Same here.
I don’t even use preprocessors for the majority of them.
My sites don’t have codes I don’t use. It’s all semantic and light. I find this approach forces you to be organized and use proper cascading styles.
It might be longer but not that much when you re-use design patterns.
I’m the same way with my JavaScript. I keep it vanilla and will only use libraries that have no dependencies.
@@craigjones21 @apply keyword isn't supported by browsers. It's been abandoned.
Tailwind with SCSS during building and PurgeCSS for the production step here. It is a thing directly between pure CSS a s Bootstrap for me. At first I was kind of opposed to using it after a short test. But after watching Adam Wathan and Jeffrey Way creating with it, I gave it another shot, and it's now my go to tool. The option to extract commonly used components is just one of the coolest things I encountered in recent years.
Kladdelic I completely agree with you, I wanted to say exact same things thank you
still in 2020?
Thanks for making this video - the timing was perfect for me as I am about to upgrade the appearance of a client's site that was using vanilla css. I really like the flexibility and power of using a utility css like tailwind! Am definitely going to use it.
Great to hear that, thanks for your very nice feedback! :)
this is really helpful! I'm a CS and one of the few in my cohort with little prior experience. This really helped me get up to speed!
That's great to read Zoe, thank you for your awesome feedback!
I personally use snippets of bootstrap by importing only the components I need , the rest it custom code. It's a nice balance between rapid and efficient development. I typically use bootstrap for the grid, modal and menu system.
Amazing breakdown I am used to building all my classes from scratch, I am a control freak lol so I am not sure if using any of this would be fun for me but seems very useful
Hello, Max. Thank you for another excellent useful video. If you ever consider doing an update of this clip, may I suggest you make a brief comparison of final css size amongst the choices? It is obvious that writing your own css gives you the smallest code (unless you write spaghetti code) but what would be the real price to pay for the convenience of using Bootstrap or TailWind? And does it even matter considering download speeds most have nowadays? That tidbit would be useful for those watching. 👍🏽
Great video I wrote my own utility stuff forever but this looks really good thanks for introducing the tail wind CSS utility library.
Thanks a lot Bill!
great explanation ! i'm currently using bootstrap, but will learn more about tailwind because your video, thanks 👍
Great video max just like your courses. I personally use SASS to import bootstrap components but i mostly use my own styling its much easier.
Thank you, very helpful video for me.
The very best explanation that I found about differences between Boostrap and Tailwind.... Good video I like it... Sorry for my english btw... Best Regards from Venezuela.
Thanks so much for your fantastic feedback Ernesto, this honestly means a lot to me!
Thanks for the comparison, very helpful
I think I will go with bootstrap as I don't have much time for writing so much css my own
I recently tried to use Tailwind for a project and I found it to be useful in some instances, and cumbersome at time. Most of the time, I feel that there are so many classes that you aren't saving time from learning CSS. Also, when the framework's default settings need to be tweaked to fit your design, you spend more time finding out how to make the changes. In all, I felt that most CSS frameworks just aren't that useful once you know vanilla CSS pretty well.
Yeah, I found myself wanting to speed through the project as I did with Bootstrap. Plus, for the most part I used my own colors. So, I am just going to use Sass from now on and refine my knowledge on CSS.
Tailwind is mostly useful for component based approaches like react/vue/angular imo. The amount of classes really doesn't bother me when everything is cut up in smaller pieces. Saves me so much time coming up with class names, going into the css/sass files.
Great video and really helped me understand. Thank you.
Very very amazing video, exactly what I needed
I think this video misunderstands Tailwind's strengths and weaknesses in common practice. First, pretty much everyone who uses Tailwind in production also uses PurgeCSS to remove unused code/classes. This is such a common thing that the Tailwind people put the PurgeCSS set-up instructions in their own docs. Second, you do have a lot of control with Tailwind because every class is easily customized, you can easily add your own Tailwind-ed classes, etc. But with that said, some lack of control in Tailwind is intended because it's a tool for creating design systems. Having only nine shades of blue or only ten padding options is the whole point. This kind of limited, curated set of choices helps you create fast, cohesive, consistent designs across your site. Third, I would argue against the idea that no expert knowledge of CSS is needed to use Tailwind. For example, one of Tailwind's greatest strengths is how it handles responsive breakpoints, but I think it would be difficult to use these classes well without in-depth understanding of CSS media queries. Tailwind is weird in that you write no CSS but probably need to know a lot about CSS to use it effectively.
agreed
Tailwind is garbage imo
@@cas4425 why?
why does w3c css validation doesn't validate tailwind
Hi Max...You are gr8 tutor. I bought almost all of your courses. I bought CSS course just to understand positions in detail. I hope, it will help me to overcome my fear of using positions.
Thanks a lot for sharing this great feedback, happy to have you on board of the CSS course! We tried our best to create a really comprehensive course, so I think that positioning and also other CSS topics should be a lot clearer after the course :)
CSS / SCSS, DIY!
I remember back in the day on small projects bootstrap would be good to just leverage for it's grid system, but now with modern CSS with CSS grid it's so easy to do those layouts.
Set up your own variables: font sizes, spacing, breakpoints, colours. Then make some basic re-usable components, buttons, forms, info boxes, toast messages, modals, and you will have learnt so much more than using a library and you won't have to fight it with any overrides.
I love your explanation sir. This is the video i have been looking for. Thank you! for the effort.
This is a nice video. Im learning how to develop websites for fun. I think im going to stick to pure css. It will be painfully slow but then I can fully understand my code. Bootstrap seems great but I like to have the most amount of control. Bootstrap may be good in the future for prototyping a style but idk how often id ever do that
what do you think about Skeleton framework? I am in process of learning front-end and i think skeleton is so simple for small project espeacially
It was a very good video, I think you explained everything in the best way possible 👍👌
Excellent explanation, thanks a lot for the video!
perfect video and explanation for a beginner, thank you
Awesome as always Max, thanks! (I bought the course!)
Thank you so much for your comment and for your support James, this really means a lot to me!
Correct me if I'm wrong, but shouldn't you keep the outline for accessibility purposes?
Thanks for the explanation with awesome colors and code
thank you man from iran this is one of the best videos i have ever seen for comparing these tnx a lot!
Good video, very comprehensive. I became a fan. Just wanted to add a point. A major benefit of bootstrap is its responsive feature. The ready made media queries are great.
Tailwind make It better
Max, in the first part you used vanilla css or only Css before Bootstrap ???
I'm still new to CSS. I have just started messing around with Tailwind. But I noticed You can use Tailwind CSS IntelliSense on Visual Studio Code to help speed up the process.
but if your basics are good you can master any thing.
so CSS Grid + Tailwind will be super flexible?
Thank you, that was informative!
Max, thank you very much for this video.
regarding this subject, when you are maing a website that already has a desin ux/ui, what is the best practice?
normaly you will use a framewoork plus some css. but sometimes you have a design that partly matches one framework, and partly matches another. should we use them for for different component? (for example, input text from material design & bootstrap button)
Sir your thoughts on material design! MD-bootstrap or angular material!?
Angular Material is more than just a styling framework - it ships a lot of pre-built Angular components. So I guess the comparison isn't really that helpful. If you want pre-built components like date pickers or datatables, go with Angular Material. If you most want the styles (and some basic components): Go with md-bootstrap I guess
I love component based frameworks like react material ui, for a backend guy like me, these things are god sent
Thanks for this great video..vanilla CSS is the way to go pro!
what's the another options of tailwind css ??
To download less of Bootstrap's files, you could simply download what you want, e.g. a file for buttons if that's all you need.
Writes the better code using SASS or vanilla, which one is better? Someone?
Seems to me Bootstrap came on the scenes when CSS3 introduced media classes... You didn't mention anything about Responsive Design...
Excellent Explanation!
Thanks a lot man very well explained
Hmmm, actually we can extends tailwind css settings. and purgecss to delete the class we dont need. Now I'm fan of tailwind. and i just use plain css/postcss because they had the magic syntax with @, pretty usefull though if you want to make styled components. Tailwind are still in beta but adam wathan video on tailwind make me amaze and i just use it.
Your videos are very useful, thank you for your share!
That's really great to read Thiên, thank you for your comment!
Very good vid, everything was explained nicely
Where would you place Sass in your workflow?
Is possible to use Boostrap and Tailwind together?
Hello Find and Replace, loll
well, I prefer to write my own CSS,
so when I decide to change some padding (or else) I don't have to change all the class everywhere
also with Bootstrap, I found myself overwriting what Bootstrap introduce
Bootstrap was developed for prototyping, and probably should still only use for that...
I am new to web development. Frameworks like Bootstrap or Tailwind seem to violate the principle of "separation of content and styling". Is that true? If so, is that a significantly debated principle?
Don't think it's true with Bootstrap because they just use classes. Tailwind I believe uses inline styling. Inline styling has its pros and cons. It's really just a matter of taste.
I think this idea is obsolete. This paradigm works well for simple and consistent documents that can be styled with minimal use of classes. If you want to make a modern website, you'll find yourself wrapping elements solely for the purpose of styling. At this point, content and styling aren't coupled anymore. Sure, you could give the class a "semantic" name like 'news', but you're actually just obfuscating the fact that you want to give the news block a rounded border.
W3C gives the following advice: "Use class with semantics in mind." [...] "Think about why you want something to look a certain way, and not really about how it should look." (www.w3.org/QA/Tips/goodclassnames). Now go their homepage and inspect the DOM. You'll find class names like 'size1on3' and 'w3c_logo_shadow'. Or what about this beauty: . Very semantic indeed. I do realise that I'm using the logical fallacy "tu quoque". But still, I think that their incapability to follow their own advice speaks volumes.
My advice: try to use semantic tags whenever possible: for tables, for buttons, for paragraphs, etc. Only use 'helper elements' like wrappers, containers and inners when you really need them. From there, keep a pragmatic approach and use the most appropriate tool for the job. Just think about aspects like maintainability, usability, compatibility and performance. Each project is different and I think there is a use case for each method mentioned in this video.
very nice!! great video! thanks bro!
Thank you for this video! You're awesome!
Thank you very very much for your support Renan, YOU are awesome!
Could you make a video about utility framework like Tailwind or Tachyons?
I'll note the idea - right now I'm not planning it though. But certainly something I might cover in the future.
Thank you for the video!
Hi Max,
Many thanks for sharing your opinion about css frameworks
I have been using bootstrap and I absolute agree with all of your points
Recently i have started looking into foundation 6, i noticed that it gives you the option of way to structure you css... Either you can directly use in built classes or you can create your own classes and in sass you can include inbuilt framework mxins as as substiute of writing direct classes in html
This way it gives more freedom to you to quickly customise if needed later any css class in sass without having to change html files
How do you see two frameworks
If possible kindly compare this two frameworks and let us your opinion
Also should we consider using foundation for production?
Thanks for sharing your opinion - great to hear you're liking the video!
I guess Foundation is ready for production, yes. I haven't really worked with it to be perfectly honest.
How do you build modal and popover with Tailwind ? Bootstrap is way more than just CSS...
I used Bootstrap on many projects back in the day. It worked well enough. But, with CSS GRID, and FLEXBOX, I feel like the time spent to learn a framework would be better spent just learning Vanilla CSS. For most websites, there aren't that many classes that need to be written. Class names can be more meaningful. It's actually simpler than using a framework! The hardest thing is probably doing your first responsive navbar in pure css. After that, it is easier to keep clients happy and on-brand, and to maintain the projects.
But, I'm a one-man shop. The use-case that I think makes more sense for a framework would be on a big team of developers with various abilities and backgrounds. Having a standard "way of doing things" could be helpful. Otherwise, seems like more trouble than it's worth.
Agreed 💯. With Flexbox and CSS Grid, CSS frameworks aren't necessary any more unless you work in a company where you're asked to use one. Learning a framework takes time and you're limited in how you can customise it. That's why I stopped using Bootstrap and began writing my own code from scratch.
All that time is better spent mastering CSS and using a preprocessor like SASS. Building your OWN custom components is damn hard work but immensely rewarding. Your CSS skills will really go through the roof and your websites will really stand out from the crowd and look original.
I want to be a freelance web developer and have been learning Flexbox and CSS Grid over the last few months. Yes, building a responsive navbar is the most difficult which is why I'm doing it first. It should get easier after. Custom CSS is the way to go!
What if components + utilities + tree shaking?
This helped me, thank you. I have built my backend and front end in vue, but dont have a UX as yet. i am am trying to get a landing page coded up using grid, but am having trouble.. how about vuetify or any other vue component frameworks? could you do a landing page tutorial example (stripe.com) landing page with svg background images.
Thanks for the suggestion - I'll note it!
Great tutorial again 😊
Thank you :)
Doesn’t tailwind have a built-in config that handles all the unnecessary code?
I like to create my own style sheets for my own projects. But, it's too long and takes more time. So, I use and prefer Sass or Less. Same style with less time and effort.
Great overview still in September 2022
Awesome. I like the way you compare the thing and also your Udemy course is great.
Thanks a lot Joe, great to read that you like both the video and the course :)
I think there are additional perspectives to consider, too. Although the utility frameworks do indeed add a lot of character bloat to HTML (making traditional coders think, "Yuck!"), they do provide a different kind of abstraction that some people might lean towards.
Ideas that might gravitate a person or team to using utility CSS might be: You are designing modular systems, developing components using a JavaScript framework, which will certainly use some sort of templating engine. At this point, you may still be adding several classes to style a button, but you do so once for that button component; it may get rendered in the DOM hundreds of times by Vue, React, Angular, whatever, but your template only had you code that once.
I also think that it's a bit of a paradigm shift - a new way of approaching code-oriented design. The front-end community has been going through these shifts for years now, and will continue to do so. Remember when most people react strongly towards CSS in JS?
I'm not actually making a case for utility CSS (I've never used it) but I can understand why some might choose it for certain projects. If you are using some templating engine, take it on! If not, think twice.
Thanks a lot for sharing your opinion -very interesting to read that!
Sometimes there comes a point where you are too reliant on a framework when simple CSS will do. In real-life applications, apps have customized designs that can turn really bloated code-wise because you're overwriting all of these Bootstrap styles, when it is easier and more efficient to just start from scratch.
Thank you so much. I just subscribed. So where does CSS Grid and Flexbox fit into all this?
And how does it compare to bootstrap 4? Do we learn bootstrap or CSS grid or Flexbox or flexbox together with CSS Grid? I would like a framework but be able to tweak a lot.
Lol css grid and CSS flexbox ARE CSS vanilla
@@vladimirgorea8714 I know. I really thought they were some sort of framework. Sounded so scary in the beginning.
Anyone knows what editor he was using?
Hello guys, Im really not sure if this section is the right one but nvm. Actually I develope a React App with NextJS and I use MaterialUI + vanilla css. My Problem: my pagespeed on mobile device is swinging around 88 to 97. I recognized that I really dont need mat ui coz I just use it for Grids…sooo Yeah!
My question: The most important thing is, that the pagespeed should fast as possible…
Which CSS would you use for ? • vanillaCSS
or
• tailwindCSS
?
Thanks for all replies ❤️
Hey Max, are you going to make a course about Next.js as you made one for Nuxt?
At the moment I do not plan to create a course about Next to be honest, this could of course change in the future though.
On important point to note is that the co-creator Steve Schoger of Tailwind is one of the best UI/UX designers I have come across. His twitter tips on good design practices are absolutely solid gold, as is his book, Refactoring UI. To have a CSS framework made by such a knowledgeable guy is a BIG pro. I would argue that using tailwind to learn good design practices, is worth the effort alone. You can always then move on to custom CSS armed with this knowledge.
hey dude you explained it very well 👍👍👍
in tailwind I would say you must be an expert of css to get it work. Without knowing how css works you cant do anything with tailwind and actually vanilla css gives u much more flexibility without being and expert you would be able to get your work done but I dont think possible with tailwind.
Max , leant React from Your React course 😊, please Make a course on how to pronounce Your Name 😅i still struggle in that lol. Joking !
Thank you for clearing up some of the confusion. I've learnt to code vanilla css and always wondered if a framework is worthwhile. I think I'm going to keep plugging away with vanilla to keep getting better! 😄😄
Happy to read that the video was helpful James, thank you!
Tailwind classes that are unused can be purged if configured correctly you can find the information their docs. I personally learned css and scss then transitioned to tailwind.
I can get really uncomfortable when I limit/remove the possibility of changing a style of a single component without having to dive into the html. Even though css and html still are separate, I don't feel that "separation of concerns" is respected. By composing classnames, you're actually still styling your page in html. The only difference with the ol' style-attribute is that the css is shared across components thanks to the use of class names. But the result of the composition in classnames is not shared at all (ignoring tpl-parsers).
My stylesheets mainly use BEM. The usage of scss or postcss make it possible to reuse code through mixins, only this way I keep all my styling in css files and limit the composition of classnames in HTML, respecting the separation of concerns as much as possible. I have stolen many ideas from these frameworks and added them to my workflow.
Component & utility libraries will require some customisations as many project will ask just that little thing that is different than what these frameworks provide, forcing you to "hack" into or around these systems.
Awesome .. great way to explain .. hats off ..
So happy to read that you like the video John, thank you!
There's a fourth option which is never discussed:
.my-button {
@extend .btn;
@extend .btn-primary;
}
This effectively decouples your application from third party frameworks and lays the foundation (pun intended) for developing your own custom styles.
Another benefit is that it keeps the HTML a little more sane. HTML is for structure, not style. Adding 20 class names to an HTML element is just one step removed from the old days of inline styling.
I know that's an odd statement in 2019 when frameworks like React actively encourage people to inject code into `style` attributes, but I disagree with that as well. I get the impression many modern tools like React and Bootstrap were written by backend developers that wanted control over the frontend.
In my opinion, the conventions implemented by Vue.js, specifically their single-file-components, offers a glimpse of salvation for the often forgotten separation of concerns.
I should just write an article about this... The world needs to know we're going down a dark path.
@Academind - Article Written: The “Backendification” of Frontend Development
medium.com/@mktlr/the-backendification-of-frontend-development-62f218a773d4
I agree with alot of what you've said, 99% of the back-end developers I've worked with have no interest in the design aspect of things, and have little respect for it, which extends to CSS. Bootstrap for them is their go to.
It seems to me that CSS get's treated as being unimportant and trivial by people learning front-end development, when IMO at least, it's very important. When you think about it, it's the foundation of you're web app, and there's significant value in being able to write clean easily extensible CSS code from the get go.
The inline style trend in React is overblown. I don't really see it promoted; mostly just styled-components which still uses CSS classes. I use SCSS and CSS modules in React.
well, you're wrong about one disadvantage of tailwind. Tailwind doesn't have unnecessary overhead code. They claim that if any code is not being used in the project it automatically gets removed from the codebase.
What over-head code are you referring to ?
It's rare to see a comparison video that doesn't shoehorn in a preconceived "right" answer. I came here specifically to see if Tailwind was right for me, and now I'm convinced that continuing with vanilla CSS like I've done for 20+ years is the best choice for me.
Zurb Foundation is one that gets forgotten about. It's a bit like Bootstrap but far more control over the control look.
I always assumed I had to do everything by myself so I used vanilla css (not knowing people called it "vanilla") and started using bootstrap (it does save you time when you're doing a job or homework and you don't wanna care about CSS at ALL) but Tailwind sounds great even though it looks like you're moving CSS from the stylesheet to HTML xD.
Bootstrap 4.0 is very different from previous versions and I think you did not checked out the new features.
They introduced utility classes (eg.: bg-primary, mb-4). They also added a lot of customization option with the use of SASS as they added a lot of overrideable SASS variables. Lastly you can import only part of the library which means less "Unecessary Overhead Code".
I did, no worries. It still primarily is a component framework. I do mention that you can customize it in the video and still, this is not how most people use it. With the CDN link, you got the entire framework - and the reality is, that this is one of the main ways many people use it. That's not even bad per se, it's just something to consider
Academind Correct me if I'm wrong but when you compare technologies you should cover the full capabilities of them not just the part "most people use". This way more and more people can understand the potential in them.
4 years later Tailwind is very popular. Interesting to see this video 4 years later to see how much has changed.
Tailwind is so good at whipping up a quick website. No more thinking of names for classes. CSS file is tiny.
Is this professional??? Using Bootstrap for the layout(rows/columns) and then using CSS vanilla to style the website to your own according?
I seem to prefer it this way, am i wrong?
Thank You. You are awesome
완전 찾던 정보네요!
Yeah but you failed to mention materialize css which gives you way too many options, that then will enable you to avoid using anything else. In fact, the widgets added make it easier to develop freely without having to worry about classes. Customization is also very easy with materialize especially how classes are named and how they behave
Perfect Video :)
Can I ask what editor/ide you are using?
Of course Chris, I'm using Visual Studio Code.
I use both CSS and Bootstrap. Bootstrap might be limited but with CSS, you can get more control with it
This only talks about styling, component frameworks also include component behaviors such as modal or tabs. Building with tailwind or vanalla css, you also need to write all the behavior codes.
I would use vanilla CSS for production and Bootstrap for development stages. I'm not sure how to go about Tailwind. When would I use Tailwind?
now