Original subtitles

In this lecture, we're going to install Tailwind.

It's necessary to install tailwind because the static template uses a lot 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 options for adding tailwind to a View project.

The first option is to link the style sheets from the indexed HTML file.

This is what we did before.

It's a decent solution, but it's not.

The approach will take for this project.

Vite should process our CSS files.

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 VITE to process the code, we must do things differently.

This is why we will go with the second option.

Tailwind can be installed with NPM.

Best of all, this package has a command for helping us create configuration files for tailwind.

Let's give it a try.

In the resource section of this lecture, I provide a link to a guide for installing tailwind with vite.

We're going to be following these steps for installing tailwind.

Feel free to pause the video and try these steps yourself.

Otherwise, let's go through it together.

Head back to the editor in the command line.

Stop the server.

It shouldn't be running during installation.

Next run the following command and pm ie minus dh tailwind.

CSS post.

CSS auto pre fixer.

We're installing three packages which are tailwind posts CSS and auto pre fixer.

All will be necessary for running tailwind.

Behind the scenes, Tailwind uses post CSIS for creating its classes.

These packages should have been installed successfully.

The next step is to run the following command and ppc's tailwind.

CSIS init minus p.

This command will generate the configuration files for tailwind and post CSS.

The post CSS configuration file does not have anything special.

Let's focus on the Tailwind file.

In our project's root directory, there's a new file called Tailwind dot config dot js.

This is the official file for configuring tailwind.

Through this file we can modify tailwinds classes with JavaScript.

Sounds strange, right?

Like I said before, tailwind uses post CSS, which is a library for converting CSS into JavaScript.

You can think of tailwind as one large post CSS plugin.

It'll inject a series of classes into our application.

We can modify colors, breakpoints, font, families, etc. Let's review the configuration settings

together.

The first option is called content.

During the bundling process, Tailwind will search for its classes from within our project.

It'll generate a list of classes used by our app.

These classes will be added to the final bundle.

What about the other classes from Tailwind?

They'll be removed before Tailwind can produce a bundle.

It needs to know where it can find our files.

The content option is an array of files to search for tailwind classes.

By default, it's empty.

Let's head back to the installation page.

On this page.

There's an example from the guide.

You can find the example from step three.

Copy the items in the example.

Next.

Head back to the editor.

Pace the items into the content array.

There are two items in the array.

The first item is the index html file.

The second item is a pattern.

Tailwind will search for classes in all files in the source directory.

If a file has the view or JavaScript extension.

Tailwind will search through these files.

That's all we'll need.

Let's keep studying the other options.

Afterward, we have the theme option.

The theme option is where we can modify the colors, font sizes and other features of tailwind.

Lastly, we have the plugins option.

It's an array of plugins for extending tailwind.

If we leave these options, empty tailwind will use its default configuration, which is suitable for

most projects.

Luckily, we will not need to customize tailwind.

The default classes are suitable for our purposes as you'll soon see.

Tailwind can account for almost any situation.

There's one more thing I want to point out.

You may receive an error from this file.

The error stems from the module object.

Technically this is not an error.

Is lint is treating this object as an error.

It doesn't know what the module object is.

There are different ways to avoid this error.

I think the simplest solution is to support Node as an environment.

Open the s lint configuration file.

At the bottom of the object at an object called environment.

Next, add the node property with a value of true.

The environment object will allow us to support different environments.

Currently is lint assumes that our app is running in the browser.

This is primarily true.

However, we have a few files that run in Node to add support for node environments.

We can set the node property to.

True.

You may need to restart the editor or close the file for these changes to take effect.

Great.

The error from is lint has gone away.

We're almost at the finish line.

The final step is to load tailwinds classes into our CSS files, open the base CSS file from the source

slash assets directory.

Initially view will create this file for creating base styles.

It will be pre-filled with CSS code.

Let's completely empty the file.

Next, add three directives called base components and utilities with the Added Tailwind Directive.

These directives are created by tailwinds.

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 its styles.

These directives will perform that action.

There's one final step.

The CSS file must be imported.

Open the main JS file.

We haven't had the opportunity to review this file in the future.

I promise we'll talk about this file.

For now, the main objective is to load our project CCIS below the import statements.

Import the base case file.

Just like that.

We have installed Tailwind.

It took a while, but it was well worth the effort.

Tailwind is an extremely powerful CSS framework.

Most of the template styles depend on this framework.

In the next lecture, we're going to get some practice with Tailwind.