I found the perfect component library
I found the perfect component library
A quick look at Daisy UI - a UI library built on top of Tailwind CSS.
💬 Topics:
- Pros and cons of Tailwind CSS;
- Styling modern web apps;
- Atomic CSS and utility classes;
- Best component libraries;
- Working with Daisy UI.
Content
0.319 -> my search is finally over and now this
3.6 -> is not an exaggeration in a recent video
6 -> I was comparing solid.js with react and
8.94 -> I was explaining that one of the main
10.679 -> reasons it's hard for me to adapt new
12.54 -> libraries in production is the lack of
14.519 -> tooling and for me a complete flexible
17.82 -> component library is at the top of the
20.1 -> tolling list
21.42 -> we all are familiar with material UI and
24.48 -> its support for established Frameworks
26.279 -> such as angular review my personal
28.56 -> favorite and design provides UI tooling
31.38 -> for react and it was one of the main
33.3 -> reasons I was usually leaning towards
35.219 -> react when starting a new project of
38.04 -> course there are various other component
40.379 -> libraries options out there but not all
42.6 -> of them feel as complete and thus
44.46 -> powerful as material or ant or at least
47.76 -> that's what I thought enter dayzy a
51.239 -> component Library built on top of wait
53.579 -> for it Tailwind CSS
55.92 -> let's spend the next few minutes looking
58.02 -> at the main features and the dev
59.579 -> experience Daisy UI enables for you by
62.64 -> the end of the video we'll build a
64.559 -> couple of small app widgets and I
66.78 -> promise you'll be impressed with what
68.34 -> you'll see we'll get things started by
70.5 -> setting up a basic solid.js project
72.36 -> which will allow us to easily create
74.34 -> some UI components these days I'm using
77.46 -> vid whenever possible and you can check
79.86 -> the video linked into the top right
81.24 -> corner if you want to find out why
83.759 -> next we'll install Tailwind CSS both CSS
87.54 -> this UI and we are ready to go this is
91.02 -> the resulting project structure I know
93.659 -> there are so many files in here
95.42 -> front-end projects can get intimidating
97.799 -> these days but don't worry once you get
100.86 -> the gist of it it'll all make sense
103.5 -> this UI is a plugin for Tailwind CSS so
107.1 -> during this video we'll make some small
109.5 -> changes in the Tailwind config file for
112.439 -> now I'm just registering the days UI
114.659 -> plugin and then I'm jumping into the app
117.36 -> section to create my actual templates
119.34 -> and content
120.6 -> we'll discuss all the benefits of the zy
123.18 -> in just a second but first let's take a
125.759 -> quick detour and see what's the deal
127.259 -> with Tailwind CSS
129 -> well in short Tailwind is an extremely
131.879 -> popular utility for CSS framework
134.34 -> designed to alleviate some of the pain
136.62 -> points of writing plain CSS rules CSS is
140.28 -> not the hardest thing to write but
142.14 -> styling code bases have a this tendency
144.18 -> to grow in size and complexity as time
146.52 -> goes by
147.599 -> in the long run maintainability becomes
150.06 -> a real issue and this is the main
151.92 -> problem Tailwind is trying to fix it
154.68 -> does this by following Atomic CSS
156.72 -> principles and honestly some other
159.48 -> rather opinionated ideas
161.64 -> if you have a lot of experience with
163.739 -> styling apps via plain CSS or a
166.2 -> preprocessor such as scss the utility
168.78 -> classes approach might look like a deal
170.819 -> breaker especially since the HTML
173.459 -> templates end up looking horrific
175.62 -> sometimes this is a known disadvantage
178.2 -> of tailwind and there are options and ID
181.2 -> extensions you can use to hide away long
183.84 -> lists of utility classes
185.76 -> by the way I know that the community is
188.28 -> pretty divided on the Tailwind topic so
190.739 -> please let me know in the comments if
192.54 -> you got the chance to use Tailwind in
194.28 -> production and if it is worth it or not
196.4 -> on the other hand these utility classes
199.2 -> are really powerful and they help with
201.06 -> the speed of development so here is
203.58 -> where the zy jumps in it manages to
206.4 -> efficiently adapt Tailwinds features and
208.379 -> benefits while hiding its problems
211.019 -> so if standing a button in Tailwind
213.36 -> would end up looking like this here is
215.58 -> the same button styled with Daisy why
217.739 -> pretty nice right I know if you'll
220.86 -> compare the easy with any other UI
222.72 -> Library you will say that the dev
224.519 -> experience is pretty much the same and
226.62 -> that there is no reason to be that
228.12 -> excited about it hear me out though
230.58 -> there are at least two big reasons to be
233.099 -> excited about this UI two reasons of
236.099 -> course not taking into account the rich
238.379 -> component Library we'll get to in a
240.599 -> second
241.379 -> first of all the GUI is built on top of
244.319 -> Tailwind CSS so you'll still be able to
246.9 -> use all Tailwind utility classes in your
249.36 -> project as a result you'll get both the
252.12 -> convenience of a component library and
254.159 -> the flexibility of atomic CSS all in one
256.62 -> second of all the easy UI is framework
259.5 -> agnostic this means you don't have to
261.78 -> look for a solid or swelled port for
263.699 -> instance it works directly with plain
265.979 -> HTML and with any type of framework
268.199 -> check out the list of example
270 -> repositories they cover angular react
273 -> Astro quick and even more exotic options
275.759 -> like Elm so this means that from now on
278.58 -> you can use the same Tailwind power UI
281.04 -> system regardless of the framework your
283.32 -> project is written in okay so for the
286.32 -> past couple of minutes you've seen me
288.06 -> building an app with a drawer effect and
290.22 -> a side menu in here I Define the hero
293.04 -> section with a couple of form controls
295.139 -> and the collection of Statistics note
297.479 -> that I didn't write any CSS to achieve
299.58 -> all these and I'm also getting things
301.5 -> such as theming or responsiveness out of
304.139 -> the box anyhow there is no reason to go
306.78 -> through all the components the zui is
308.88 -> offering believe me there are a lot of
311.28 -> them just know that it covers all the
314.16 -> usuals you would expect from a component
316.199 -> Library their documentation is well
318.6 -> written and you'll be able to jump in
320.759 -> and find whatever you need in no time
322.8 -> for the rest of this video I want to
325.38 -> discuss a bit more the idea of
327.18 -> customization and configuration most
329.82 -> Daisy components have a lot of variants
331.86 -> which will allow you to build pretty
333.66 -> much whatever you'll need remember that
336.12 -> all these Daisy classes can be always
337.919 -> combined with Tailwind CSS classes going
341.1 -> back to the Tailwind config file here
343.38 -> are some of the default Behavior years
345.06 -> you can modify in your project
347.1 -> for example you can allow the components
349.5 -> to be styled or just use the basic
351.6 -> skeleton this is useful if you want to
354.18 -> work on the UI details on your own
355.919 -> another useful configuration is setting
358.56 -> up a prefix for all Daisy classes this
361.44 -> comes in handy when you are adding this
363.24 -> UI into an existing project and you want
365.88 -> to make sure there are no conflicts
367.62 -> between your old classes and the ones
369.72 -> added in by the library what I find
372.3 -> really useful is a collection of themes
374.46 -> provided by this UI if you are not happy
377.039 -> with the provided selection you can
378.9 -> Define your custom theme or even
380.94 -> randomly generate a palette of colors in
383.46 -> the theme generator section then simply
386.28 -> register your custom theme in the
387.96 -> Tailwind config file if you found this
390.36 -> video useful please consider liking it
392.28 -> and subscribing to the channel until
394.319 -> next time thank you for watching
Source: https://www.youtube.com/watch?v=tZbOO97urWs