In this lecture, we're going to install tailwind, it's necessary to install tailwind because the static
template uses many of the classes defined by tailwind.
If we want the same stylings to appear in the application, we'll need to install it.
There are two solutions for loading tailwind into an app.
We can directly linked these style sheets in a source slash indexed HTML file.
Linking the style sheets can be a great way to learn a new CIUSSS framework.
It's a decent solution, but it's not the solution will be implementing for this project.
We want our CIUSSS code to be processed by the angular Seelye by having our code processed.
It'll be optimized for production.
We want the smallest bundle possible when shipping an app.
This project is going to contain a lot of code, which will mean a large file size.
We should take every opportunity to optimize our code, including CSS, if we want angular to process
our code.
We'll need to do things differently.
Luckily, Angular officially supports tailwind if it detects tailwind.
It'll automatically handle most of the work for integrating it into our project.
There are three steps for installing tailwind.
The first step is to install the tailwind package in the command line.
If you have left the server running, turn it off.
Typically, we would open another command line without interrupting the server.
However, problems could arise with this installation.
It's better to turn off the server during installation after turning off the server.
Run the following command and PM install minus D Tailwind Access at latest.
We're installing the tail wind package.
This is a no brainer if we want to use tailwind in our project, we need to install this package.
The ceiling will automatically check if this package exists within our project.
It'll integrate tailwind into our projects.
We've taken care of the first step of installing tailwind.
The second step is to create a configuration file.
It's super simple.
In the node modules directory, there is a folder called Been.
Some packages will create an executable for assisting us with development.
Not all packages, but many do.
If a package comes with an executable, it'll be placed inside.
This directory tailwind has an executable for helping us generate a configuration file inside the command
line.
We will run the following command NPCs tailwind in it.
The NNPC's command is how we can instruct no to run an executable inside the bin folder after running
this command.
A new file will be created in the root directory of our project, called Tailwind Dot Config Dot J.S..
If we want to change how a class behaves, we need to configure the class through JavaScript.
Sounds crazy, I know, but that's the beauty of tailwind.
Instead of using a different programming language for processing success, Tailwind will process CC
with JavaScript.
During this process, we can manipulate our styles through JavaScript.
Every class and tailwind is customizable.
It's recommended we customize the classes through JavaScript instead of through RSS.
This is the official file for configuring tailwind.
As I mentioned before, we can modify the classes generated by tailwind.
We can modify colors, breakpoints, font families, et cetera.
The first option is called contents.
Behind the scenes tailwind removes unused KSAZ from our app.
It's capable of scanning the contents of our files for classes.
We can configure the purge settings through this option.
At the moment, nothing will be purged since it doesn't know where to find our CIA says we should update
this option to help purge KSAZ, find our access code.
We can tell Purge to search for our files in multiple locations.
However, everything in our app will be written in the source directory.
The content option is an array of files.
We will pass in the following Typekit slash source slash star star slash star HTML comma T-S.
The value we passed in will tell the perjurer to search through the source directory for HTML and TypeScript
files.
It'll search for tailwind classes if there are tailwind classes.
It'll make sure they're not removed from the final bundle by scanning the contents of our files.
Till when we'll always know which classes are needed.
There's one last step we need to take.
We need to load tailwind into our project.
At the moment we've installed the dependencies.
Tailwind comes with various features.
We don't have to load every feature in tailwind.
We have the option of picking and choosing what we want.
We can load tailwind by updating these styles.
Dot C Assess File.
Inside this file, we will add the following at Tailwind Base at tailwind components, at Tailwind Utilities.
The at tailwind keyword is called the directive.
It's not to be confused with angular directives.
Tailwind created these directives.
They'll inject tailwinds classes into our project tailwind.
Classes aren't automatically injected into our project.
We need to tell it where to load it styles.
These directives will perform that action.
This syntax is not a success feature, but as I mentioned before, our code will be processed into JavaScript.
From there, tailwind will be able to replace these directives with actual success.
We're adding these directives to these styles access file.
Normally, we should add styles to a components respective style sheet.
However, there are hundreds of classes we would constantly be switching back and forth between files
to add access.
Luckily, thanks to Purge CC, we don't have to worry about excessive access or overlapping styles.
Tailwind will be smart enough to understand what we need.
Let's run the server with the Nji Serve Command.
Next, let's view the browser.
Our app is starting to look like the original.
There are some modifications we need to make in the next lecture.
We will be exploring configuring tailwinds to get the exact look we had in the static version.