How to Install & Configure TailwindCSS 4 in AdonisJS 6 using Vite

In This Lesson

We'll learn how to get TailwindCSS 4 installed and configured within a new AdonisJS 6 project using TailwindCSS' Vite plugin. We'll then discuss some of the key changes around configuring Tailwind within your project.

Created by: @tomgobich
Published: 7 months ago

Join the Discussion 2 comments

@cubicalprayer712
5 months ago

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 is resources/views/inertia_layout.edge

1
1. Responding to cubicalprayer712
  
  @tomgobich
  5 months ago
  
  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!
  
  0

Transcript

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

AdonisJS Quick Tip

25 Lessons

2h 59m

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.