phx_gen_tailwind

phx_gen_tailwind copied to clipboard

I updated the postcss.config.js to

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

Created a new css file components.css with

@layer components {
  .h1-alert {
    @apply text-red-500 text-5xl font-bold text-center;
  }
}

and added it to the app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "components.css";
...

but the styles get not applied. What I am doing wrong?

You need to add --postcss to the watchers arguments.

npx: [
  "tailwindcss",
  "--postcss",
  "--input=css/app.css",
  "--output=../priv/static/assets/app.css",
  "--watch",
  cd: Path.expand("../apps/playground_web/assets", __DIR__)
]