00:02
Okay, so I have a brand new
00:06
AdonisJS 6 web starter kit opened up here,
00:08
both in my browser, as well as text editor.
00:10
And the very first thing that we need to do
00:12
to get TailwindCSS 4 up and running with this
00:15
is to install its dependencies.
00:16
So jumping into our terminal where our project is located,
00:19
let's npm i to install TailwindCSS.
00:24
And there's a number of different approaches
00:26
we could take to get TailwindCSS
00:27
actually integrated into our project.
00:29
We could still use PostCSS as we did with version 3,
00:32
or now in version 4, there's also a TailwindCSS
00:35
Vite plugin specifically to get this up and running.
00:38
Since AdonisJS 6 uses Vite within its projects
00:41
for its front-end assets,
00:42
that's going to be the simplest approach to use.
00:44
So let's target that with TailwindCSS/Vite.
00:48
Hit enter to install both of those.
00:50
And then once installed,
00:51
we can go ahead and hide away our terminal.
00:53
So that we can tell exactly when this takes place,
00:55
let's first jump into our resources,
00:57
views, home.edge page, because this actually adds Tailwind
01:00
CSS via the CDN inside of this page itself.
01:04
So if we just remove this script, give this a save,
01:07
we can see that we now no longer have TailwindCSS
01:09
applied on our webpage here,
01:11
noted by the now huge AdonisJS logo.
01:14
We'll leave the custom colors and configuration
01:16
here momentarily so that we can reference them
01:18
on a little bit.
01:19
Now that we have TailwindCSS removed from the page,
01:21
let's jump into Vite and let's get the Vite plugin
01:24
imported and applied.
01:26
So we'll import TailwindCSS from @TailwindCSS/Vite.
01:31
Then we just want to add that plugin into our plugins array
01:35
and call it as a function.
01:36
When we give this a save,
01:37
we'll see nothing actually changes on our browser.
01:39
And that's because we haven't actually applied TailwindCSS
01:42
to our CSS file yet.
01:43
So we next want to jump into our CSS entry point
01:46
for our AdonisJS assets,
01:48
which is within our resources CSS app.css file.
01:51
Jump up to the top of this
01:53
and give ourselves a couple of line breaks.
01:55
All that we need to do to get TailwindCSS added
01:57
to the CSS file is to import TailwindCSS, just like so.
02:02
Once we give this a save,
02:03
we're going to see our page changes
02:04
because TailwindCSS is now back
02:06
and included inside of this page.
02:08
It doesn't look exactly the same
02:10
because there are some class differences
02:12
between TailwindCSS version three and four.
02:14
In addition to the fact that we haven't applied
02:16
those custom colors back into this configuration yet.
02:19
But if we go up to the logo for AdonisJS,
02:21
right click it, inspect.
02:22
We can indeed see that this has a width 16,
02:25
height 16 applied to it,
02:26
as well as a custom fill with the color primary.
02:29
If we take a look at the applied rules,
02:31
we see that we have a layer for width 16 and height 16
02:34
coming from TailwindCSS applied on this SVG.
02:37
So that is indeed coming through a okay.
02:40
And again, we haven't applied our custom colors back in yet.
02:43
So we don't currently have a fill primary
02:46
applied within these styles.
02:47
And that might be your first question is how exactly
02:49
do we reapply those custom configurations back in
02:51
now that TailwindCSS version four no longer comes with
02:54
a Tailwind configuration file for us to plop it within?
02:57
Well, that custom configuration actually is now recommended
03:00
to take place directly within your CSS file
03:02
where you're importing TailwindCSS.
03:04
You can still specify that you wanna use
03:06
a Tailwind configuration by doing @config
03:09
and then pointing to its relative path from the CSS file.
03:12
So if we had it at the root of our project,
03:13
that would be ./, ./,
03:16
go out of our CSS directory,
03:17
out of our resources directory and into the root,
03:20
and then whatever that file name is called.
03:21
So Tailwind config.js,
03:23
if you're using the version three daeming.
03:25
So if you still wanted to use a configuration file,
03:27
you have that approach available to you.
03:29
But if we wanted to use the new CSS approach,
03:31
there's now custom @rules that TailwindCSS has
03:33
to add these in.
03:34
So we can do @theme.
03:35
Let's jump back over to our home.edge
03:38
and let's copy these sand colors.
03:39
So we'll just copy those out of the style.
03:41
And now we can get rid of that style tag altogether.
03:43
Jump back over into our app.css, paste them in.
03:46
And if we give it a save just as this,
03:49
we're not gonna notice any change over here on our page
03:51
because TailwindCSS now uses a certain naming convention
03:55
to pick up which theme it is that we wanna target.
03:58
Currently, TailwindCSS doesn't know
03:59
that these are colors that we wanna use.
04:01
To find the naming conventions that they're looking for,
04:03
within our browser,
04:04
we can jump over to the TailwindCSS documentation.
04:06
Under core concepts, within theme variables,
04:09
there is this namespace section.
04:11
And we can see that in order for us to define custom colors,
04:13
we need to prefix the variable namespace
04:16
with hyphen hyphen color hyphen
04:18
and then whatever that variable name is
04:20
that we wanna apply.
04:21
Same thing for font, custom text utilities,
04:23
so on and so forth.
04:24
So let's jump back over into our application
04:27
and prefix all of these sand colors
04:29
with the color namespace.
04:31
I'm using command option and the down arrow
04:33
to get multi cursors.
04:34
We'll just type color hyphen to prefix those.
04:37
With that, if we give that a save,
04:38
you might've noticed a very slight difference
04:41
in our pages colors.
04:42
If we go up a couple of parent elements,
04:44
we have this BG gradient using our from sand one to sand two.
04:48
If we take a look,
04:49
this is now properly picking up our color sand two
04:52
and our color sand one
04:53
for this background gradient utility.
04:55
So those are working A-okay.
04:57
Let's go do the primary color next.
04:59
So within this Tailwind configuration,
05:01
there's this primary default and lighter color.
05:03
Let's just give both of those there a copy,
05:05
jump back into our app CSS,
05:07
plop those into our theme,
05:09
prefix both of these with hyphen hyphen color hyphen
05:11
primary.
05:12
And then the second one's going to be hyphen lighter.
05:15
And then we can just get rid of the default from there.
05:17
Add our semi colons onto both of those,
05:20
give that a save.
05:20
And now if we come back down to our SVG,
05:23
which has that fill primary,
05:24
we can now see that's applied within this elements rules.
05:27
And if we hover over the color,
05:28
we can see that it is indeed using our color primary.
05:31
Let's do those fonts next.
05:33
So back into here,
05:34
we can copy this font string right there,
05:36
jump back over into our app CSS.
05:38
In order to add in a custom font,
05:40
we want to prefix this with hyphen hyphen font hyphen.
05:42
And then let's target sans.
05:44
Paste both of those back in,
05:46
add a semi colon,
05:47
give that a save.
05:48
And we don't have any visible text quite on our page,
05:50
but if we scroll down a little bit,
05:51
we see some right there
05:53
and this is being applied on the body.
05:54
So if we take a look at the body,
05:55
we now have our font family with our font sans
05:58
using our instrument sans variable.
06:00
So that's now applied as well.
06:02
Awesome.
06:03
Now, for me,
06:04
the most confusing part to getting this up and running
06:06
was what exactly do we need to do
06:07
to get purge CSS back up and working
06:10
as we used to have that content array
06:11
within our Tailwind configuration in version three.
06:14
Well, now by default,
06:16
TailwindCSS is going to scan all of the files
06:18
within our projects working tree.
06:20
And that's going to be defined
06:21
by the TailwindCSS Vite plugin that we're using here.
06:25
So where we have our Vite configuration
06:27
is where our working tree is defined.
06:29
So TailwindCSS is automatically going to scan
06:31
all of these files for class usages.
06:33
Any candidates for classes that it finds,
06:35
it will add it into TailwindCSS
06:38
to be included in our CSS file.
06:39
There are a few file exclusions,
06:41
like it's going to exclude everything
06:43
within our .gitignore,
06:44
which will also include our node modules.
06:46
And then it will also pass over other CSS files
06:49
as there's no need for redundancy there.
06:51
And there's a couple other exclusions as well.
06:53
But if for any reason,
06:55
we needed to change that default behavior
06:57
or add an additional source to it,
07:00
there's two different approaches that we can take.
07:02
We can change where TailwindCSS
07:04
will use the working tree relative to our CSS file
07:07
by passing a source argument into the TailwindCSS import.
07:11
So for example, this is relative to the CSS file.
07:14
So if we do ./js,
07:16
this will change our project's working tree
07:19
from the root of our project
07:21
now to going back a directory out of our CSS
07:24
and then into our JavaScript directory.
07:26
And since we don't have any TailwindCSS classes
07:29
within there, we would expect for this to go back
07:31
to having no TailwindCSS classes.
07:34
But whenever we give this a save,
07:35
nothing actually changes.
07:36
We can refresh our page
07:38
and it's gonna look the exact same as it did before.
07:40
That's because TailwindCSS keeps all of these candidates
07:42
in memory within that feed plugin.
07:44
So as it finds new candidates within our files,
07:46
it will openly add that to the array to keep,
07:49
but it's not going to remove them once they go away.
07:52
So if we jump back into our terminal,
07:53
jump over to where I have the server running,
07:55
let's give it a stop and a restart, okay?
07:58
You can see in the background already,
07:59
but if we jump back into our browser now,
08:01
we can see TailwindCSS is no longer applied here.
08:04
We don't have any of our classes coming through.
08:06
If we change this now to views,
08:08
which is where our pages that's actually using the classes,
08:11
we can see it comes through.
08:12
Those candidates get added in while our server's running.
08:15
Again, if we switch that back to JS,
08:17
since these are in memory already,
08:19
it's going to leave them there as is.
08:21
But the second that we stop and restart our server,
08:23
they're gonna go back away.
08:25
So that's how you change the base path.
08:28
And you can also turn off TailwindCSS's automatic file
08:31
finding by passing none into here as well.
08:34
So let's turn that off for a brief bit.
08:36
We can now use TailwindCSS's source at role
08:39
to add additional sources in here.
08:41
And again, this is relative to our CSS files path.
08:45
So again, if we do dot dot slash views here,
08:47
give this a save, those classes come back in
08:50
and get applied to our page.
08:52
If we switch this to slash JS,
08:55
again, it's the exact same thing.
08:56
Since these class candidates are already in memory,
08:59
it's going to leave them there.
09:01
But the second that we restart our server,
09:03
they're gonna go away.
09:04
But if we come in and add yet an additional source,
09:07
dot dot slash to views,
09:09
they're gonna come right back now
09:10
because we're now including that homepage
09:13
back in the purge CSS file list.
09:15
So that was the most confusing part to this change for me.
09:18
And I've seen some others confused by that as well.
09:21
So be sure to restart your dev server
09:23
whenever you're trying to figure out your sources
09:25
and what exactly you need to target.
09:26
By default, you shouldn't have to worry about that at all.
09:30
TailwindCSS should automatically find and use
09:33
whatever it is you need,
09:35
especially whenever you're using the Vite configuration.
09:37
So you should be able to get away
09:39
with just having this as your setup.
09:41
And then again, we can go ahead and clean up
09:43
the rest of our head here a little bit as well,
09:45
getting rid of that configuration from there.
09:47
And now we're all set and ready to go.
Join The Discussion! (2 Comments)
Please sign in or sign up for free to join in on the dicussion.
cubicalprayer712
Thanks Tom, I was working on a project that was initialized with a starter kit with
inertia. Everything is the same except the file where we have to remove the pre-configured tailwindcss isresources/views/inertia_layout.edgePlease sign in or sign up for free to reply
tomgobich
Hi cubicalprayer712! Yes, Inertia's structure is a little different from the web starter kit including the name/location of it's base EdgeJS page! Happy to hear you were able to find it!
Please sign in or sign up for free to reply