00:00
(upbeat music)
00:02
TailwindCSS is a very popular CSS utility-based framework
00:08
that allows us to easily add classes
00:10
that essentially almost one-to-one
00:12
represent underlying CSS styling.
00:14
So for our example, if we wanted our H1 to be blue,
00:17
we could add a class to it called TextBlue500
00:19
or some variants there within,
00:21
and our text would automatically be blue
00:23
because TailwindCSS will provide that styling for us.
00:26
It also comes with its own configuration file
00:29
that allows us to define
00:30
what exactly we want those utilities to be,
00:32
and it allows us to customize our coloring as we see fit.
00:35
So to start with, we're gonna need to get it installed.
00:37
So let's go to our terminal here,
00:39
and let's go ahead and stop our server
00:40
by holding Control and hitting C,
00:42
and then let's clear out our terminal.
00:44
So first and foremost, we're gonna want to do npm install
00:47
to install the dependencies.
00:48
We're gonna do -D to specify that this is a dev dependency.
00:53
This is really just a shorthand
00:54
for - -save -dev, so either of those two would work here.
00:58
And then we want to install the TailwindCSS package.
01:01
So TailwindCSS actually has a dependency of PostCSS.
01:03
We're gonna need to install that as well.
01:05
If you're not familiar with it, it's similar to Sass,
01:07
if you happen to be familiar with that.
01:08
At the end of the day,
01:09
it's just gonna add additional functionality
01:10
on top of our underlying CSS.
01:12
Whenever we compile it, it will take it all down
01:14
to vanilla CSS so that we can make use of it.
01:16
So let's go ahead and install PostCSS here as well.
01:20
And then lastly, let's use autoprefixer.
01:22
Autoprefixer is a PostCSS utility.
01:25
It's going to essentially add in vendor
01:27
or browser prefixes where they're needed inside of our CSS
01:30
to make it fully browser compliant.
01:31
So let's go ahead and install those.
01:33
Cool, let's clear our browser.
01:34
And we can have TailwindCSS inject its command
01:36
into our project by running mpx tailwind-css-init-p.
01:41
MPX allows us to run commands from packages
01:44
without necessarily having to have them installed
01:46
directly from the npm repository.
01:48
And here we're specifically running TailwindCSS init.
01:51
And this in particular will add in
01:52
the TailwindCSS configuration file.
01:55
And the -p is also going to add in
01:57
the PostCSS configuration file
01:58
so that we can actually tell PostCSS
02:00
to use TailwindCSS as well as autoprefixer.
02:03
So let's go ahead and run this.
02:04
And you should see it created TailwindCSS configuration
02:07
file called tailwind.config.js.
02:09
And it also created for us a PostCSS configuration file
02:12
called postcss.config.js.
02:14
Cool, so let's open back up our project.
02:15
And if we scroll down, we should see two new files
02:18
within our project structure,
02:19
PostCSS.config.js and TailwindCSS.config.js.
02:23
Within the Tailwind configuration,
02:24
we can alter our theme,
02:25
add an additional TailwindCSS plugins.
02:27
And it also comes with a utility called purgeCSS,
02:31
which will streamline any TailwindCSS utilities
02:33
down to just those that we're using within our project
02:36
whenever we build this out for production,
02:37
keeping our CSS file nice and streamlined.
02:39
In order for purgeCSS to work though,
02:41
within this array, we need to provide a file path
02:43
to all of the applicable files
02:45
that it should check for our CSS usages.
02:47
So for this, we'll do a string
02:49
and let's point it to our resources,
02:51
any folder inside of resources
02:53
and any file inside of resources,
02:55
but we can specifically tailor this
02:57
to those that end in edge, JavaScript, TypeScript.
03:00
And then if you happen to use it, JSX or TSX, or even Vue.
03:04
So within our resources directory,
03:06
it will look inside of any folder within there
03:08
and any file within any folders
03:09
that end in edge, JavaScript, TypeScript, JSX, TSX, and Vue.
03:14
Any styles that it finds within any of those matching files,
03:17
it will leave into our final CSS file
03:20
whenever we build it for production.
03:21
So we can give this a save.
03:22
Next, let's take a look at our new post CSS configuration
03:24
file and you see it has tail and CSS
03:27
and auto-prefixer automatically within here.
03:29
So we should be a-okay to go on this front.
03:31
I do wanna note that you want auto-prefixer
03:32
to be after tail and CSS though,
03:34
as that will allow auto-prefixer to add in any vendor
03:37
or browser prefixes to the underlying tail and CSS classes
03:41
that we make use of.
03:42
So since we have tail and CSS first,
03:43
post-CSS will run tail and CSS first
03:46
and then it will provide auto-prefixer
03:47
the result after it runs tail and CSS.
03:49
So the ordering here doesn't matter.
03:50
Cool, so now the last thing that we should need to do
03:52
is scroll on up to our app.css file
03:54
and add in the tailwind declarations.
03:56
So at the top of our file here,
03:58
we can do @tailwind base.
04:00
This is essentially like a CSS reset.
04:02
So it will make our H1 the same size as paragraph text
04:06
and remove all of the button styles
04:08
and all of that fun stuff.
04:09
So it's basically a CSS reset.
04:11
Then we'll wanna do tailwind and add in their components
04:14
and lastly, their utilities.
04:16
So tailwind and utilities.
04:18
Let's finally scroll down to our H1
04:20
and let's remove our blue coloring,
04:22
give this file a save.
04:23
We should now be able to jump back into our homepage
04:25
and let's scroll down to that H1
04:27
and let's add in a class of text.
04:30
And we'll make this one red so that we can easily tell
04:32
that the change did pick up within our CSS file
04:35
and that TailwindCSS is actually working
04:37
and we'll set this to the 500 variant of the red coloring.
04:41
Let's give that a save.
04:42
We do need to jump back into our terminal
04:43
and boot our server back up
04:45
so we can run npm run dev here.
04:47
Once that boots up,
04:48
we're A-okay to jump back into our browser.
04:51
Cool, so we can see a definite change happened here.
04:53
Everything pretty much looks the exact same
04:55
regardless if it's a link, an H1 or paragraph text.
04:59
That's that TailwindCSS reset taking place,
05:01
getting rid of all of the browser's default styling.
05:03
So let's head into our homepage
05:04
because that's where we added in the text coloring
05:06
and voila, we see it works and it's in a nice red.
05:09
So now we know that we have TailwindCSS working.
05:11
Let's go ahead and get rid of our browser console
05:14
and let's add in a couple of classes
05:15
just to make this a little bit easier on the eyes.
05:17
So let's hide our browser back away,
05:18
jump back into our text editor.
05:20
Let's take all of our page contents
05:22
and let's cut that out
05:23
and let's wrap it in a div with a class.
05:26
Let's set this to a max width of 3XL
05:29
and let's center it by doing MX auto
05:32
and we can paste our page contents back in
05:34
and give it a nice indent.
05:35
Let's also add some spacing around this as well.
05:37
So let's do margin top, let's say something like six.
05:39
So we should be able to give this a save,
05:41
jump back into our browser and there we go.
05:42
So that's a little bit easier on the eyes.
05:43
It's more centered, not tucked away all the way up here
05:46
in the top left corner
05:47
and it's not starting right with the top of the browser tab.
05:49
We'll want to do the exact same thing
05:51
on our movie pages here as well.
05:53
So let's go ahead and take care of that.
05:54
We also don't want our H1 to actually be red.
05:56
So let's also get rid of that there too.
05:58
Give that a save and let's copy this div.
06:00
Jump over to our show page
06:01
and we can paste the div right inside of our body
06:03
and wrap everything inside of that div.
06:05
Give everything inside of the div an indent,
06:06
give it a save.
06:07
Let's jump back into our browser
06:09
and now our movie page looks a little bit better there too.
06:11
Let's go ahead and add in a styling
06:12
specifically for our headings
06:13
so that they actually behave like headings.
06:15
So for this, we don't actually need to add in classes.
06:18
We can jump into our CSS file
06:19
and make that a global change.
06:21
So let's do that.
06:22
So within our CSS file, we can do,
06:23
let me scroll down here a little bit.
06:25
Let's do H1 and we can either type this out manually
06:27
as we are up here with the HTML and body styles,
06:30
or we can actually use TailwindCSS
06:32
and inject it inside of this H1 styling.
06:34
We can do that by doing @apply.
06:37
And now all that we need to do
06:38
is reference the TailwindCSS class
06:40
that we want to apply specifically to this element.
06:41
So for example, we could do text 3XL,
06:44
give this a save.
06:45
And now if we jump back into our browser,
06:46
our H1 is nice and large.
06:48
Let's also bold it and give it some spacing.
06:50
So we can do font bold, margin bottom three,
06:52
and maybe margin top six.
06:54
Give that a save, jump back into our browser.
06:56
And now that's looking more like a heading.
06:57
Cool.
06:58
And we can verify that that change happened globally
06:59
by jumping into our homepage
07:01
where our heading looks like a heading there as well.
07:04
Future time here interjecting here to say
07:06
that since the release of this lesson,
07:07
I've actually learned of a better way
07:08
that we can register our post CSS configuration.
07:11
The way that we have it works absolutely fine,
07:13
but there's an alternative approach that we can use
07:15
that uses one less file
07:16
within the root of our project structure.
07:18
I've also learned that I have been pronouncing
07:20
Vite incorrectly.
07:21
It's not Vite, it's instead Vite
07:22
because the word is of French origin.
07:24
So I'll be doing my best to make that correction.
07:26
I apologize in the future
07:28
if I have any additional mispronunciations there.
07:31
Okay, so back to what I was on about.
07:33
Instead of having our separate post CSS config.js file
07:35
where our plugins for TailwindCSS,
07:37
not a prefixer are defined,
07:39
we can instead define this plugin object
07:41
directly inside of our Vite config.js file.
07:44
In order to do that,
07:44
we'll either want to add an additional property
07:46
above or below plugins.
07:47
Join The Discussion! (4 Comments)
Please sign in or sign up for free to join in on the dicussion.
adonisdev
thank you so much for wonderful tutorial!
I have all changes working as described in tutorial but I dont see vscode code completion suggestions for css classes etc.
It would be great if you can share information on how to configure vscode to show those autocomplete suggestions.
Please sign in or sign up for free to reply
tomgobich
Thank you for watching!!
I believe this is the Tailwind CSS IntelliSense extension. It should immediately start working once the extension is installed :)
Please sign in or sign up for free to reply
secondman
You can also set your
postcss
directly inpackage.json
and avoid imports or extra files altogether.As you can see here I also use Tailwind's nesting and
postcss-import
(yes order does matter)Cheers
Please sign in or sign up for free to reply
tomgobich
That's awesome! Thank you for sharing, secondman!! 😁
Please sign in or sign up for free to reply