AdonisJS + InertiaJS: Adding TailwindCSS to our Adonis, Inertia, Vue Application

To make things easier for the remainder of the series, let's go ahead and take a couple of lessons to get our development environment set up by adding TailwindCSS, a UI library, and path aliases for our Vue 3 components.

So, to start, let's get TailwindCSS installed and configured within our project in this lesson.

Note that this lesson will be very similar to our existing TailwindCSS and AdonisJS lesson, if you're familiar with that flow, feel free to jump ahead to the next lesson!

Installing Required Dependencies

Let's install the required dependencies we'll need to get TailwindCSS up and working. Since TailwindCSS uses PostCSS, we’ll want to install postcss-loader for Webpack so we can compile our TailwindCSS.

npm i -D postcss-loader

Then, we’ll need to also install TailwindCSS.

npm i -D tailwindcss

We’ll also want to have TailwindCSS generate its configuration file, which we can do by running the below.

npx tailwindcss init

This will generate the tailwind.config.js file within the root of our project.

Configuring PostCSS

Once we have our dependencies installed, it’s time to jump inside our project’s code. Let’s first jump into our webpack.config.js file at the root of our project. Go ahead and scroll down to about line 172 and uncomment Encore.enablePostCssLoader(). This will enable the postcss-loader we just installed within our Webpack configuration.

// webpack.config.js

// Encore.enablePostCssLoader() // 👈 uncomment this

Encore.enablePostCssLoader() // 👈 so it looks like this

Next, in order for PostCSS to know what plugins to use for our project, we’ll need to define a PostCSS configuration within our project. There are a few ways to go about this, today let’s just go with the default way of adding a postcss.config.js file to the root of our project. Then, within this file, we’ll want to define TailwindCSS as a plugin, like the below.

// postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss')()
  ]
}

That’s all we need to do to get PostCSS working within our project. Next, we’ll move on to TailwindCSS.

Configuring TailwindCSS

By default, when we start our server up TailwindCSS is going to purge all the TailwindCSS classes not in-use within our project. So, we’ll want to define the content files it should check for class usages within our project. We can do this by defining template paths within our tailwind.config.js file’s content array, like the below.

// tailwind.config.js

module.exports = {
  content: [
    './resources/**/*.{edge,js,ts,vue,jsx,tsx}' // 👈
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This will include all files within the resources directory ending with the extension edge, js, ts, vue, jsx, and tsx. Feel free to alter what I have here for your use case.

Lastly, we’ll want to add the TailwindCSS directives to our CSS file.

/* resources/css/app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

AdonisJS starts us out with some boilerplate styles for the welcome page. Feel free to replace all of that boilerplate in your CSS file with the above.

Testing It Out

With that, TailwindCSS should now be fully set up within our project, congratulations! Next, let’s go ahead and boot our server up and test it out.

npm run dev

Note that our app.edge page housing our Vue 3 application already has our CSS and JavaScript files rigged up, so we don't need to worry about doing any of this. However, so you're aware, it's these two lines below adding our styles and scripts to our page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="/favicon.ico">

  @entryPointStyles('app') {{-- 👈 --}}
  @entryPointScripts('app') {{-- 👈 --}}

  <title>adonis-inertia-example</title>
</head>
<body>
  @inertia()
</body>
</html>

Testing A TailwindCSS Class

Just to be sure let’s do the infamous CSS test of making the text red. Go ahead and jump into our Vue app's home page code at resources/js/Pages/Home.vue and on the H1 element add the TailwindCSS class text-red-500.

<template>
  <div>
    <Link href="/login">Login</Link>
    <h1 class="text-red-500">Testing, {{ testing }}</h1>
  </div>
</template>

<script>
  import { Link } from '@inertiajs/inertia-vue3'
  export default {
    props: {
      testing: String
    },
    components: {
      Link,
    }
  }
</script>

Once you save this change, the Webpack Encore will recognize the change and immediately reflect the change in your browser. So, go ahead and open your browser and you should now see the heading is a nice red color.

If that’s what you see then all is working well!

Adding TailwindCSS to our Adonis, Inertia, Vue Application

Installing Required Dependencies

Configuring PostCSS

Configuring TailwindCSS

Testing It Out

Testing A TailwindCSS Class

Join The Discussion! (0 Comments)

AdonisJS + InertiaJS

Playing Next Lesson In

AdonisJS + InertiaJS #4.0

Adding TailwindCSS to our Adonis, Inertia, Vue Application