CODEWITHSUNDEEP
htmlcsselixirphoenix-frameworktailwind-css
2FO
2FO

Reputation: 43

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

Any page I create (liveview or otherwise) is being left-justified by default, 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. (https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix)

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

Upvotes: 2

Views: 126

Answers (1)

2FO
2FO

Reputation: 43

Remove all container classes from app.html.heex and live.html.heex.

Solution provided by @riebeekn on the elixir forum.

Upvotes: 0

Related Questions