Question

Setting up Tailwind CSS in a Phoenix project.

1. Create your project

   Start by creating a new Phoenix project if you don't have one set up already. You can follow their installation guide to get up and running.

   Terminal

   mix phx.new myprojectcd myproject

2. Install the Tailwind plugin

   Add the Tailwind plugin to your dependencies and run mix deps.get to install it.

   mix.exs

   defp deps do
     [
       {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
     ]
   end
   

3. Configure the Tailwind plugin

   In your config.exs file you can set which version of Tailwind CSS you want to use, the path to your Tailwind config, and customize your asset paths.

   config.exs

   config :tailwind, version: "3.4.4", default: [
     args: ~w(
       --config=tailwind.config.js
       --input=css/app.css
       --output=../priv/static/assets/app.css
     ),
     cd: Path.expand("../assets", __DIR__)
   ]

4. Update your deployment script

   Configure your assets.deploy alias to build your CSS on deployment.

   mix.exs

   defp aliases do
     [
       setup: ["deps.get", "ecto.setup"],
       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
       "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
     ]
   end
   

5. Enable watcher in development

   Add Tailwind to your list of watchers in your ./config/dev.exs file.

   dev.exs

   watchers: [
     # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
   ]
   

6. Install Tailwind CSS

   Run the install command to download the standalone Tailwind CLI and generate a tailwind.config.js file in the ./assets directory.

   Terminal

   mix tailwind.install

7. Configure your template paths

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

   tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       './js/**/*.js',
       '../lib/*_web.ex',
       '../lib/*_web/**/*.*ex',
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

8. Add the Tailwind directives to your CSS

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

   app.css

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

9. Remove the default CSS import

   Remove the CSS import from ./assets/js/app.js, as Tailwind is now handling this for you.

   app.js

   // Remove this line if you add your own CSS build pipeline (e.g postcss).
   import "../css/app.css"
   

10. Start your build process

    Run your build process with mix phx.server.

    Terminal

    mix phx.server

11. Start using Tailwind in your project

    Start using Tailwind’s utility classes to style your content.

    index.html.heex

    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>