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.
tw_screen_size
to your list of dependencies in mix.exs
:def deps do
[
{:tw_screen_size, "~> 1.1.0"}
]
end
tw_screen_size
package:// assets/tailwind.config.js
module.exports = {
content: [
"../deps/tw_screen_size/**/*.{ex,js}", // <--- Add this line
],
...
}
TwScreenSizeHook
in your app.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 },
});
dev.exs
configuration to enable the component in development only:# dev.exs
config :my_app, tw_screen_size: true
# 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.