Can't prevent layouts from being left aligned by default with Tailwind and Phoenix

Phoenix Forum Questions / Help
,
1

The layout of any page I create (liveview or otherwise) is being left-aligned, leaving a large blank column along the right hand side of the page.

I can’t find any embedded styles in the root.html.heex that could cause this.

root.html.heex:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%= csrf_meta_tag() %>
    <%= live_title_tag assigns[:page_title] || "Inc", suffix: " · Phoenix Framework" %>
    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
  </head>
  <body>
    <%= @inner_content %>
  </body>
</html>

Tailwind was manually installed and configured using Prag Studios guide:

Removing @import "./phoenix.css"; from assets/css/app.css

and import "../css/app.css" from assets/js/app.js

The default phoenix styles have been removed from app.css leaving:

@tailwind base;

@tailwind components;

@tailwind utilities;

Tailwind ^3.0.22
Phoenix 1.6.6
Elixir 1.13.3

2

I’d check if you have any class=“container” style tags in your app.html.heex or live.html.heex files… if so, getting rid of 'em should hopefully fix things.

2 Likes
3

Thanks @riebeekn, you rescued my evening.