How to Add TailwindCSS to Your Phoenix Project
By: Velina Petrova
Tags: JavaScript, Tailwind Css, Elixir, Programming, Phoenix Framework

Introduction

To start things off, let’s take a little bit of time to explore the nature of TailwindCSS and understand how it can find its way into a web application.

TailwindCSS is a PostCSS plugin.

For those unfamiliar with PostCSS, allow me to give you a bit of context about it. PostCSS is a tool for CSS syntax transformations. It allows developers to define custom CSS like syntax that could be understood and transformed by plugins.

PostCSS syntax transformation process

In its essence, TailwindCSS is a bunch of javascript code composed into a library and made available to the PostCSS preprocessing tool. If you want to know more about PostCSS and its architecture, you can check the resources section at the end of this blog post.

STEP 1: Install Tailwind via NPM

To add TailwindCSS to your Phoenix application, you have to install several javascript libraries from the official NPM repository.

You can do this by opening your terminal, navigating to your project’s root directory, and typing the following command:

cd assets && npm install tailwindcss postcss postcss-loader autoprefixer

STEP 2: Create PostCSS config file

Next, you need to create a file named postcss.config.js and add it to the assets directory of your project. The content of the file should be as follows:

// postcss.config.js

module.exports = {

plugins: {

tailwindcss: {},

autoprefixer: {},

}

}

That way, you are directing your Phoenix application to transform your CSS code with the help of the tailwindcss and autoprefixer PostCSS plugins.

STEP 3: Add PostCSS to Webpack

By default, Phoenix uses Webpack to bundle its javascript files. If you want to utilize TailwindCSS in your project, you must explicitly tell Webpack to run the CSS code through the PostCSS preprocessor. You can do this by adding the postcss-loader to the list of CSS rules in the webpack.config.js file, located in the assets directory of your project:

If you are using Phoenix 1.5, the code will look like this:

// webpack.config.js

...

{

test: /\.[s]?css$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader',

'postcss-loader',

'sass-loader'

],

}

...

If you are using Phoenix 1.4, the code will look like this:

{

test: /\.css$/,

use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']

}

STEP 4: Create the Tailwind Configuration File

Out of the box, Tailwind provides you with a wide selection of utility classes to use as you write your HTML code. However, in many cases, those default sets of CSS classes are not enough to help implement the design requirements.

To sort this issue, TailwindCSS's creators have provided you with a neat way to define your custom configuration. All you need to do is run the following command in your terminal:

cd assets && npx tailwindcss init

This action will create a file named tailwind.config.js and put it in your assets directory. The content of the newly generated file will look like this:

// tailwind.config.js

module.exports = {

purge: [],

darkMode: false, // or 'media' or 'class'

theme: {

extend: {},

},

variants: {

extend: {},

},

plugins: [],

}

If you want to learn more about creating your custom utility classes, you can check out the official Tailwind configuration docs.

STEP 5: Add Tailwind to Your CSS

The last step of the installation process requires you to insert the predefined TailwindCSS classes into your project. To accomplish this, extend the app.scss file located in the assets directory by adding the following three lines of code:

// app.scss @tailwind base;

@tailwind components;

@tailwind utilities;

@tailwind screens;

...