A tiny LiveView widget showing the current screen dimensions and Tailwind breakpoint. Ported from Shayan Taslim's React implementation (see Gist).
Prerequisites: Your LiveView application must already be using TailwindCSS.
- Install the package from Hex by adding
tw_screen_sizeto your list of dependencies inmix.exs:
def deps do
[
{:tw_screen_size, "~> 1.0.0"}
]
end- Ensure Tailwind searches for styles in the
tw_screen_sizepackage:
// assets/tailwind.config.js
module.exports = {
content: [
"../deps/tw_screen_size/**/*.{ex,js}", // <--- Add this line
],
...
}- Import and integrate the
TwScreenSizeHookin yourapp.js:
// assets/app.js
// import the hook
import { TwScreenSizeHook } from "../../deps/tw_screen_size/assets/js/hooks";
let liveSocket = new LiveSocket("/live", Socket, {
hooks: { ...OtherHooks, TwScreenSizeHook }, // <--- Add TwScreenSizeHook here
params: { _csrf_token: csrfToken },
});- Extend your
dev.exsconfiguration to enable the component in development only:
# dev.exs
config :my_app, tw_screen_size: true- Import TwScreenSize, and add the component to your root layout:
# layouts.ex
defmodule MyAppWeb.Layouts do
use MyAppWeb, :html
import TwScreenSize
embed_templates "layouts/*"
end<!-- root.html.heex -->
<!-- ... -->
<body class="antialiased bg-white">
<%= @inner_content %>
<.tw_screen_size :if={Application.get_env(:my_app, :tw_screen_size)} />
</body>The component is always visible by default. If you'd prefer it to appear temporarily on the first page-load, and on screen resizes, you can set the :opacity_timeout attribute:
<.tw_screen_size
:if={Application.get_env(:my_app, :tw_screen_size)}
opacity_timeout={3000}
/>attr :base_class, :string,
default:
"items-center space-x-2 rounded-full bg-black px-2.5 py-1 font-mono text-xs font-medium text-white",
doc:
"Override the default styling with a custom class. This is appended to the always required classes: `hidden fixed opacity-0 transition-opacity z-[999]`."
attr :placement_class, :string,
default: "bottom-5 left-5",
doc:
"Classes to determine where the screen size component is placed on the screen. Defaults to `bottom-5 left-5`."
attr :transition_duration_class, :string,
default: "duration-300",
doc: "The Tailwind transition duration class. Defaults to `duration-300`."
attr :opacity_timeout, :integer,
doc:
"Make the component 100% transparent after this timeout in milliseconds. Becomes visible on initial page load and during resizes. Disabled by default."Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/tw_screen_size.