Easily Add TailwindCSS to Your AdonisJS Project
Tags: tailwindcss, adonisjs, typescript
Published: 2021-04-02 02:18:34

---
title: Easily Add TailwindCSS to Your AdonisJS Project
description: Learn how to use Laravel Mix in your AdonisJS project to manage your TailwindCSS and TypeScript front end assets.
published: true
tags: TailwindCSS, AdonisJS, TypeScript
canonical_url: https://warrenwong.org/posts/add-tailwindcss-to-adonisjs
cover_image: https://warrenwong.org/_nuxt/img/bambi-corro-_mEuPiaz8pU-unsplash-960.jpg
---
> If you haven't created a base AdonisJS project yet, check out my post on [setting up VSCode for AdonisJS](https://warrenwong.org/posts/setting-up-vscode-for-adonisjs) where I walk you through both creating a new AdonisJS project as well customizing the VSCode Prettier formatter to *my* liking.

[Laravel Mix](https://laravel-mix.com) is a wrapper around Webpack that helps abstract away a lot of the confusing Webpack configurations and is especially useful when used with an MVC framework like Laravel and AdonisJS.

First, you'll need to install it through `npm` or `yarn` then create a `webpack.mix.js` file:

```bash
# 1a. npm
npm i -D laravel-mix

# 1b. yarn
yarn add -D laravel-mix

# 2.
touch webpack.mix.js
```

Before we go any further, let's decide where to put our front end assets. Looking at some [guidance](https://adonisjs.com/recipes/4.1/frontend-assets) from the AdonisJS 4.1 docs, looks like a good place to put them would be in `resources/assets`.

So let's create a TypeScript file that will serve as our entry into the front end scripts as well as a CSS file to load TailwindCSS.

```bash
mkdir resources/assets
mkdir resources/assets/ts
touch resources/assets/ts/app.ts
mkdir resources/assets/css
touch resources/assets/css/app.css
```

Now let's [install Tailwind](https://tailwindcss.com/docs/guides/laravel) and the associated dependencies:

```bash
# npm
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest

# yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
```

Create the `tailwind.config.js` file:

```bash
npx tailwindcss init
```

While you CAN just `touch tailwind.config.js`, this command actually tests to see if you have dependencies like PostCSS. If something went wrong, you'll know at this stage.

Now let's set it up to remove unused styles. This step is critical if you want to deliver the smallest bundle size.

> If this was just a quick project where you didn't need to customize your Tailwind configuration and didn't care about the bundle size, the easiest way to leverage TailwindCSS would be to just bring in [Tailwind via CDN](https://tailwindcss.com/docs/installation#using-tailwind-via-cdn).

```js
 {
  purge: [
    "./resources/views/**/*.edge",
    "./resources/assets/ts/**/*.ts",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

```

Now open up the `webpack.mix.js` file we created earlier and configure the entry and output for our TypeScript and CSS files.

```js
const mix = require("laravel-mix");

mix.setPublicPath("public");

mix
  .ts("resources/assets/ts/app.ts", "js/app.js")
  .postCss(
    "resources/assets/css/app.css",
    "css",
    [require("tailwindcss")]
  );
```

We need to set the public path to `public` because that's where the static assets for our AdonisJS project are located. Laravel Mix can handle TypeScript files as long as you install `ts-loader` as a dependency, so let's do that:

```bash
# npm 
npm i -D ts-loader

# yarn
yarn add -D ts-loader
```

You'll notice that I placed the transpiled JavaScript in the `public/js` directory and the resulting CSS file in `public/css`. We will need to know that when we edit our HTML file.

Now let's place our `@tailwind` directives in our empty `app.css` file as per a normal Tailwind setup:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Now let's run mix to build the front end assets:

```bash
npx mix
```

You will now see the new files in your public directory. Go ahead and place them in your Edge template:

```html
  <link rel="stylesheet" href="css/app.css'">
  <script src="js/app.js'"></script>
```

Go ahead and inspect the `app.css` file to see that the `@tailwind` directives have been replaced with the Tailwind library.