Install Tailwind CSS with AdonisJS

Note: I advocate for Laravel projects most of the time, but was recently looking on how Adonis is doing, which is created from inspiration on Laravel and Rails. That is when this article comes to its being.

AdonisJS is a great Node.js framework. As a developer you can just get started by using it for your next project. It is flexible and written using typescript.

Although, you can build great web project with Adonis with a very good speed, you can boost your development with Tailwind CSS which is gaining popularity in the web development industry. But there is no straight forward guide on how to install Tailwind CSS on Adonis projects. So in this article we will go through the steps to setup an Adonis project with Tailwind CSS.

Create your project

Start by creating a new AdonisJS project if you don’t have one set up already. Choose "web" when installer asks to select project structure. Press "y" when it asks "Configure webpack encore for compiling frontend assets?"

npm init adonis-ts-app@latest my-project
cd my-project

Install Tailwind CSS

Using npm, install tailwindcss and its peer dependencies, as well as postcss-loader, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer postcss-loader
npx tailwindcss init -p

Enable PostCSS support

In your webpack.config.js file, enable PostCSS Loader. See the documentation for more information.

Encore
  // ...
  .enablePostCssLoader()
;

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.edge",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file.

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

Start your build process

Run your build process with npm run dev.

npm run dev

Start using Tailwind in your project

Make sure your compiled CSS is included in the <head> then start using Tailwind’s utility classes to style your content.

welcome.edge

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @entryPointStyles('app')
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

That's it. Your Adonis project is now ready. You can leverage the tailwind utilities in your project to create awesome interfaces.

Afaz's Blog