Every page I create (whether liveview or not) seems to be aligned to the left by default, creating a large empty space on the right side of the page.
I have checked the root.html.heex file for any embedded styles that might be causing this issue, but haven't found any.
Here is a snippet from 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>
I followed Prag Studios guide to manually install and configure TailwindCSS. ()
To resolve the alignment issue, I removed
@import "./phoenix.css";and also removed
import "../css/app.css"This resulted in removing the default phoenix styles from app.css, leaving only:
@tailwind base;
@tailwind components;
@tailwind utilities;
Current Versions - Tailwind: ^3.0.22, Phoenix: 1.6.6, Elixir: 1.13.3