1
00:00:01,080 --> 00:00:03,900
‫So, as always, let's start the section

2
00:00:03,900 --> 00:00:07,560
‫by understanding the technology that we're gonna be using.

3
00:00:07,560 --> 00:00:11,133
‫So, in this case, that's tailwind CSS.

4
00:00:12,600 --> 00:00:17,600
‫So, what is tailwind CSS, or "tailwind" for short?

5
00:00:17,760 --> 00:00:20,340
‫Well, I think there is no better way

6
00:00:20,340 --> 00:00:23,280
‫of defining tailwind then the description

7
00:00:23,280 --> 00:00:25,500
‫that they have on their own website,

8
00:00:25,500 --> 00:00:29,250
‫which says that "tailwind is a utility-first

9
00:00:29,250 --> 00:00:33,060
‫CSS framework packed with utility classes

10
00:00:33,060 --> 00:00:37,200
‫like flex, text-center, and rotate-90,

11
00:00:37,200 --> 00:00:39,750
‫among many many other classes,

12
00:00:39,750 --> 00:00:42,990
‫that can be composed to build any design

13
00:00:42,990 --> 00:00:44,820
‫directly in your markup."

14
00:00:44,820 --> 00:00:49,020
‫So, right in your HTML or JSX.

15
00:00:49,020 --> 00:00:51,750
‫Now, okay, so that sounds nice.

16
00:00:51,750 --> 00:00:56,750
‫But what actually is this utility-first CSS approach?

17
00:00:57,540 --> 00:01:01,710
‫Well, basically when we write utility-first CSS,

18
00:01:01,710 --> 00:01:05,250
‫we write lots and lots of tiny classes

19
00:01:05,250 --> 00:01:08,880
‫where each class has one single purpose,

20
00:01:08,880 --> 00:01:11,640
‫and we then combine these classes

21
00:01:11,640 --> 00:01:15,180
‫to build entire components and layouts.

22
00:01:15,180 --> 00:01:19,260
‫So, that's the idea behind utility-first CSS,

23
00:01:19,260 --> 00:01:23,580
‫or Atomic CSS, which is the same thing.

24
00:01:23,580 --> 00:01:27,240
‫Now, tailwind did not invent this approach

25
00:01:27,240 --> 00:01:30,450
‫but they were the ones who made it really popular

26
00:01:30,450 --> 00:01:33,990
‫by building this super high quality framework

27
00:01:33,990 --> 00:01:36,990
‫that's also super easy to use.

28
00:01:36,990 --> 00:01:40,773
‫So, basically in tailwind, all these tiny classes

29
00:01:40,773 --> 00:01:44,490
‫that we just talked about are already written for us,

30
00:01:44,490 --> 00:01:46,620
‫ready to be used.

31
00:01:46,620 --> 00:01:49,740
‫So, when we use tailwind for, or styling,

32
00:01:49,740 --> 00:01:53,400
‫we're not gonna write any new CSS at all.

33
00:01:53,400 --> 00:01:56,880
‫Instead, we will leverage some of tailwind's hundreds

34
00:01:56,880 --> 00:01:59,220
‫of classes to design and build

35
00:01:59,220 --> 00:02:01,710
‫anything that we can imagine.

36
00:02:01,710 --> 00:02:04,050
‫So, it's really that powerful.

37
00:02:04,050 --> 00:02:05,760
‫But, instead of me listing

38
00:02:05,760 --> 00:02:08,550
‫all the great features here of tailwind,

39
00:02:08,550 --> 00:02:11,850
‫let's do this as a list of pros and cons,

40
00:02:11,850 --> 00:02:15,060
‫because of course there are also some problems

41
00:02:15,060 --> 00:02:17,013
‫with an approach like this.

42
00:02:17,970 --> 00:02:22,440
‫But first, let's actually start with the good parts.

43
00:02:22,440 --> 00:02:26,280
‫So, one of the main advantages of using tailwind

44
00:02:26,280 --> 00:02:29,790
‫is that you don't have to worry about naming classes

45
00:02:29,790 --> 00:02:31,770
‫ever again, which means

46
00:02:31,770 --> 00:02:34,590
‫that you can focus on writing your styles

47
00:02:34,590 --> 00:02:38,100
‫instead of coming up with class names.

48
00:02:38,100 --> 00:02:40,620
‫Another huge benefit of tailwind

49
00:02:40,620 --> 00:02:44,010
‫is the fact that you don't have to jump between files

50
00:02:44,010 --> 00:02:45,120
‫all the time,

51
00:02:45,120 --> 00:02:48,240
‫so, as you write markup and styles.

52
00:02:48,240 --> 00:02:50,520
‫You do it all at the same time

53
00:02:50,520 --> 00:02:54,420
‫and all in one place, which is incredibly convenient

54
00:02:54,420 --> 00:02:57,210
‫once you get used to this workflow.

55
00:02:57,210 --> 00:02:59,580
‫And a great side effect of this

56
00:02:59,580 --> 00:03:02,880
‫is that you will immediately understand the styling

57
00:03:02,880 --> 00:03:05,550
‫in any project that uses tailwind,

58
00:03:05,550 --> 00:03:07,440
‫which will not only make it easy

59
00:03:07,440 --> 00:03:09,570
‫to collaborate with other people,

60
00:03:09,570 --> 00:03:12,870
‫but also to come back to your own projects

61
00:03:12,870 --> 00:03:16,320
‫after many month or even years.

62
00:03:16,320 --> 00:03:20,550
‫So, in my opinion, these first two advantages alone

63
00:03:20,550 --> 00:03:24,060
‫are enough reason to give tailwind a try.

64
00:03:24,060 --> 00:03:25,830
‫Not thinking about classes

65
00:03:25,830 --> 00:03:29,520
‫and not having to jump between files all the time

66
00:03:29,520 --> 00:03:32,400
‫is really a game-changer,

67
00:03:32,400 --> 00:03:35,190
‫but there are even more advantages.

68
00:03:35,190 --> 00:03:38,250
‫For example, tailwind can really be seen

69
00:03:38,250 --> 00:03:42,780
‫as a design system with very good predefined colors,

70
00:03:42,780 --> 00:03:46,410
‫font sizes, spacing, and more.

71
00:03:46,410 --> 00:03:48,180
‫So, the framework itself

72
00:03:48,180 --> 00:03:51,840
‫has already taken many good design decisions for you,

73
00:03:51,840 --> 00:03:55,080
‫which empowers developers to build beautiful

74
00:03:55,080 --> 00:03:59,340
‫and consistent UIs a lot easier than before.

75
00:03:59,340 --> 00:04:03,480
‫So, all of this will of course save you a lot of time,

76
00:04:03,480 --> 00:04:07,320
‫not only because you will write a lot less CSS,

77
00:04:07,320 --> 00:04:10,530
‫but also because things like responsive design

78
00:04:10,530 --> 00:04:15,300
‫are extremely easy and fast to implement as well.

79
00:04:15,300 --> 00:04:18,000
‫And, I could really go on and on here,

80
00:04:18,000 --> 00:04:20,760
‫but just one more thing that I will say

81
00:04:20,760 --> 00:04:24,510
‫is that tailwind's documentation is world class.

82
00:04:24,510 --> 00:04:28,680
‫And the same is true for the integration into VS Code,

83
00:04:28,680 --> 00:04:33,570
‫which gives you auto completion for all tailwind classes.

84
00:04:33,570 --> 00:04:36,270
‫Okay, but enough praising,

85
00:04:36,270 --> 00:04:38,070
‫let's go to the bad parts

86
00:04:38,070 --> 00:04:41,610
‫that everyone likes to point out immediately.

87
00:04:41,610 --> 00:04:44,280
‫And the biggest thing that people seem to hate

88
00:04:44,280 --> 00:04:49,280
‫about tailwind is that the markup, so the HTML or JSX,

89
00:04:49,650 --> 00:04:51,810
‫will look extremely ugly,

90
00:04:51,810 --> 00:04:54,930
‫and sometimes straight-out unreadable,

91
00:04:54,930 --> 00:04:57,660
‫because, in order to style one element,

92
00:04:57,660 --> 00:05:00,750
‫you sometimes need 10 or 20 classes,

93
00:05:00,750 --> 00:05:04,980
‫which will quickly make your markup look very cluttered.

94
00:05:04,980 --> 00:05:08,310
‫This however, is not really a huge deal,

95
00:05:08,310 --> 00:05:10,920
‫as you get used to it pretty quickly,

96
00:05:10,920 --> 00:05:13,770
‫like, after a day or two using tailwind,

97
00:05:13,770 --> 00:05:16,830
‫it's not gonna be a huge problem anymore.

98
00:05:16,830 --> 00:05:19,170
‫What could be a small problem

99
00:05:19,170 --> 00:05:20,940
‫is that you will have to learn

100
00:05:20,940 --> 00:05:23,610
‫all the tailwind classes that they provide,

101
00:05:23,610 --> 00:05:26,370
‫or at least the ones that you need the most.

102
00:05:26,370 --> 00:05:30,060
‫And so, that's surely some extra effort there.

103
00:05:30,060 --> 00:05:31,530
‫But luckily for us,

104
00:05:31,530 --> 00:05:35,820
‫these classes are really well-named and quite intuitive.

105
00:05:35,820 --> 00:05:38,520
‫And so, again, after a day or two,

106
00:05:38,520 --> 00:05:40,500
‫you'll have automatically memorized

107
00:05:40,500 --> 00:05:44,580
‫the most important class names that you use all the time.

108
00:05:44,580 --> 00:05:46,770
‫Another downside of tailwind

109
00:05:46,770 --> 00:05:49,890
‫is that you need to install and set up tailwind

110
00:05:49,890 --> 00:05:51,720
‫on each new project,

111
00:05:51,720 --> 00:05:55,200
‫which will always take, like, five or 10 minutes.

112
00:05:55,200 --> 00:05:58,620
‫Now, the biggest issue, at least for me personally,

113
00:05:58,620 --> 00:06:01,040
‫was the feeling that I was kind of giving up

114
00:06:01,040 --> 00:06:05,970
‫on "vanilla CSS." So, as I'm recording this,

115
00:06:05,970 --> 00:06:10,620
‫I wrote my first line of CSS almost 20 years ago.

116
00:06:10,620 --> 00:06:14,820
‫So, that's a lot of investment in one technology.

117
00:06:14,820 --> 00:06:19,530
‫I also was always against all kinds of CSS frameworks,

118
00:06:19,530 --> 00:06:21,570
‫for example, like Bootstrap,

119
00:06:21,570 --> 00:06:24,780
‫or even against React component libraries,

120
00:06:24,780 --> 00:06:28,560
‫simply because I wanted to write my own styles.

121
00:06:28,560 --> 00:06:30,600
‫However, with tailwinds,

122
00:06:30,600 --> 00:06:32,850
‫I do actually feel like I'm still

123
00:06:32,850 --> 00:06:37,080
‫writing my own CSS, just in a different way.

124
00:06:37,080 --> 00:06:40,410
‫Tailwind is such a thin layer of abstraction

125
00:06:40,410 --> 00:06:44,970
‫that it doesn't make you feel completely removed from CSS.

126
00:06:44,970 --> 00:06:46,590
‫So, in my opinion,

127
00:06:46,590 --> 00:06:50,040
‫the benefits clearly outweigh the bad parts here,

128
00:06:50,040 --> 00:06:53,880
‫at least enough to give tailwind an honest try.

129
00:06:53,880 --> 00:06:57,420
‫So, trust me, I was really hard to convince

130
00:06:57,420 --> 00:07:00,330
‫for all the reasons that I just talked about.

131
00:07:00,330 --> 00:07:03,990
‫And so, if even I can like tailwind a lot,

132
00:07:03,990 --> 00:07:07,350
‫then everyone can, and I'm saying this

133
00:07:07,350 --> 00:07:09,900
‫because for some reason many people

134
00:07:09,900 --> 00:07:13,710
‫like to hate on tailwind for no apparent reason,

135
00:07:13,710 --> 00:07:16,410
‫so, without even having tried it.

136
00:07:16,410 --> 00:07:20,310
‫So, please don't be that kind of person.

137
00:07:20,310 --> 00:07:23,550
‫This is indeed a controversial technology,

138
00:07:23,550 --> 00:07:28,350
‫so, just give it a try before forming an opinion about it.

139
00:07:28,350 --> 00:07:31,320
‫And in fact, this section of the course

140
00:07:31,320 --> 00:07:34,380
‫gives you exactly that opportunity.

141
00:07:34,380 --> 00:07:36,600
‫So, over the next few lectures,

142
00:07:36,600 --> 00:07:38,910
‫we will style the entire project

143
00:07:38,910 --> 00:07:43,410
‫that we're building right now using 100% tailwind.

144
00:07:43,410 --> 00:07:46,020
‫And so, this is guaranteed to show you

145
00:07:46,020 --> 00:07:50,730
‫if you like tailwind or if you're never gonna use it again.

146
00:07:50,730 --> 00:07:53,103
‫So, let's go find out.