1 00:00:00,180 --> 00:00:06,570 In this lecture, we're going to install tailwind, it's necessary to install tailwind because the static 2 00:00:06,570 --> 00:00:09,990 template uses many of the classes defined by tailwind. 3 00:00:10,320 --> 00:00:15,600 If we want the same stylings to appear in the application, we'll need to install it. 4 00:00:16,140 --> 00:00:19,680 There are two solutions for loading tailwind into an app. 5 00:00:20,010 --> 00:00:25,530 We can directly linked these style sheets in a source slash indexed HTML file. 6 00:00:25,860 --> 00:00:30,210 Linking the style sheets can be a great way to learn a new CIUSSS framework. 7 00:00:30,510 --> 00:00:35,580 It's a decent solution, but it's not the solution will be implementing for this project. 8 00:00:36,150 --> 00:00:42,300 We want our CIUSSS code to be processed by the angular Seelye by having our code processed. 9 00:00:42,480 --> 00:00:44,430 It'll be optimized for production. 10 00:00:44,700 --> 00:00:47,850 We want the smallest bundle possible when shipping an app. 11 00:00:48,210 --> 00:00:53,160 This project is going to contain a lot of code, which will mean a large file size. 12 00:00:53,400 --> 00:01:00,570 We should take every opportunity to optimize our code, including CSS, if we want angular to process 13 00:01:00,570 --> 00:01:01,200 our code. 14 00:01:01,350 --> 00:01:03,210 We'll need to do things differently. 15 00:01:03,720 --> 00:01:08,970 Luckily, Angular officially supports tailwind if it detects tailwind. 16 00:01:09,210 --> 00:01:14,040 It'll automatically handle most of the work for integrating it into our project. 17 00:01:14,370 --> 00:01:17,250 There are three steps for installing tailwind. 18 00:01:17,580 --> 00:01:22,440 The first step is to install the tailwind package in the command line. 19 00:01:22,650 --> 00:01:25,380 If you have left the server running, turn it off. 20 00:01:25,680 --> 00:01:30,420 Typically, we would open another command line without interrupting the server. 21 00:01:30,690 --> 00:01:34,020 However, problems could arise with this installation. 22 00:01:34,320 --> 00:01:39,360 It's better to turn off the server during installation after turning off the server. 23 00:01:39,480 --> 00:01:47,040 Run the following command and PM install minus D Tailwind Access at latest. 24 00:01:49,530 --> 00:01:51,660 We're installing the tail wind package. 25 00:01:51,930 --> 00:01:57,750 This is a no brainer if we want to use tailwind in our project, we need to install this package. 26 00:01:58,050 --> 00:02:03,000 The ceiling will automatically check if this package exists within our project. 27 00:02:03,330 --> 00:02:06,330 It'll integrate tailwind into our projects. 28 00:02:06,900 --> 00:02:10,350 We've taken care of the first step of installing tailwind. 29 00:02:10,650 --> 00:02:13,770 The second step is to create a configuration file. 30 00:02:14,040 --> 00:02:15,210 It's super simple. 31 00:02:16,260 --> 00:02:20,310 In the node modules directory, there is a folder called Been. 32 00:02:22,840 --> 00:02:27,640 Some packages will create an executable for assisting us with development. 33 00:02:27,880 --> 00:02:30,040 Not all packages, but many do. 34 00:02:30,310 --> 00:02:34,210 If a package comes with an executable, it'll be placed inside. 35 00:02:34,210 --> 00:02:41,770 This directory tailwind has an executable for helping us generate a configuration file inside the command 36 00:02:41,770 --> 00:02:42,280 line. 37 00:02:42,310 --> 00:02:46,630 We will run the following command NPCs tailwind in it. 38 00:02:49,180 --> 00:02:56,830 The NNPC's command is how we can instruct no to run an executable inside the bin folder after running 39 00:02:56,830 --> 00:02:57,610 this command. 40 00:02:57,820 --> 00:03:05,440 A new file will be created in the root directory of our project, called Tailwind Dot Config Dot J.S.. 41 00:03:08,120 --> 00:03:13,550 If we want to change how a class behaves, we need to configure the class through JavaScript. 42 00:03:13,880 --> 00:03:17,330 Sounds crazy, I know, but that's the beauty of tailwind. 43 00:03:17,660 --> 00:03:24,530 Instead of using a different programming language for processing success, Tailwind will process CC 44 00:03:24,530 --> 00:03:25,610 with JavaScript. 45 00:03:26,000 --> 00:03:30,440 During this process, we can manipulate our styles through JavaScript. 46 00:03:31,040 --> 00:03:33,740 Every class and tailwind is customizable. 47 00:03:34,160 --> 00:03:39,500 It's recommended we customize the classes through JavaScript instead of through RSS. 48 00:03:39,920 --> 00:03:43,070 This is the official file for configuring tailwind. 49 00:03:43,370 --> 00:03:48,140 As I mentioned before, we can modify the classes generated by tailwind. 50 00:03:48,380 --> 00:03:53,040 We can modify colors, breakpoints, font families, et cetera. 51 00:03:53,660 --> 00:03:55,850 The first option is called contents. 52 00:03:56,030 --> 00:04:00,410 Behind the scenes tailwind removes unused KSAZ from our app. 53 00:04:00,740 --> 00:04:04,520 It's capable of scanning the contents of our files for classes. 54 00:04:04,760 --> 00:04:07,970 We can configure the purge settings through this option. 55 00:04:08,600 --> 00:04:15,200 At the moment, nothing will be purged since it doesn't know where to find our CIA says we should update 56 00:04:15,200 --> 00:04:19,550 this option to help purge KSAZ, find our access code. 57 00:04:20,029 --> 00:04:24,680 We can tell Purge to search for our files in multiple locations. 58 00:04:24,950 --> 00:04:29,180 However, everything in our app will be written in the source directory. 59 00:04:29,540 --> 00:04:32,330 The content option is an array of files. 60 00:04:32,450 --> 00:04:42,080 We will pass in the following Typekit slash source slash star star slash star HTML comma T-S. 61 00:04:44,740 --> 00:04:52,150 The value we passed in will tell the perjurer to search through the source directory for HTML and TypeScript 62 00:04:52,150 --> 00:04:52,810 files. 63 00:04:53,350 --> 00:04:57,790 It'll search for tailwind classes if there are tailwind classes. 64 00:04:58,030 --> 00:05:03,680 It'll make sure they're not removed from the final bundle by scanning the contents of our files. 65 00:05:03,910 --> 00:05:06,880 Till when we'll always know which classes are needed. 66 00:05:07,450 --> 00:05:09,610 There's one last step we need to take. 67 00:05:09,880 --> 00:05:12,760 We need to load tailwind into our project. 68 00:05:12,970 --> 00:05:15,910 At the moment we've installed the dependencies. 69 00:05:16,240 --> 00:05:18,610 Tailwind comes with various features. 70 00:05:18,880 --> 00:05:21,850 We don't have to load every feature in tailwind. 71 00:05:22,120 --> 00:05:25,330 We have the option of picking and choosing what we want. 72 00:05:25,660 --> 00:05:28,680 We can load tailwind by updating these styles. 73 00:05:28,690 --> 00:05:30,160 Dot C Assess File. 74 00:05:32,290 --> 00:05:41,500 Inside this file, we will add the following at Tailwind Base at tailwind components, at Tailwind Utilities. 75 00:05:44,650 --> 00:05:47,830 The at tailwind keyword is called the directive. 76 00:05:48,100 --> 00:05:50,980 It's not to be confused with angular directives. 77 00:05:51,280 --> 00:05:53,620 Tailwind created these directives. 78 00:05:53,920 --> 00:05:58,360 They'll inject tailwinds classes into our project tailwind. 79 00:05:58,360 --> 00:06:01,900 Classes aren't automatically injected into our project. 80 00:06:02,200 --> 00:06:04,720 We need to tell it where to load it styles. 81 00:06:05,080 --> 00:06:07,510 These directives will perform that action. 82 00:06:07,870 --> 00:06:15,100 This syntax is not a success feature, but as I mentioned before, our code will be processed into JavaScript. 83 00:06:15,430 --> 00:06:21,010 From there, tailwind will be able to replace these directives with actual success. 84 00:06:21,670 --> 00:06:25,480 We're adding these directives to these styles access file. 85 00:06:25,780 --> 00:06:30,340 Normally, we should add styles to a components respective style sheet. 86 00:06:30,670 --> 00:06:37,240 However, there are hundreds of classes we would constantly be switching back and forth between files 87 00:06:37,240 --> 00:06:38,530 to add access. 88 00:06:38,800 --> 00:06:45,970 Luckily, thanks to Purge CC, we don't have to worry about excessive access or overlapping styles. 89 00:06:46,330 --> 00:06:49,570 Tailwind will be smart enough to understand what we need. 90 00:06:49,960 --> 00:06:53,260 Let's run the server with the Nji Serve Command. 91 00:06:55,790 --> 00:06:57,860 Next, let's view the browser. 92 00:07:02,360 --> 00:07:04,910 Our app is starting to look like the original. 93 00:07:05,180 --> 00:07:08,790 There are some modifications we need to make in the next lecture. 94 00:07:08,840 --> 00:07:14,930 We will be exploring configuring tailwinds to get the exact look we had in the static version.