TwScreenSize

originalTweetImage

A tiny, one-component package for LiveView x Tailwind to elevate your design iteration experience. Originally implemented by Shayan Taslim in React (see Gist).

Installation

Prerequisites: Your LiveView application must already be using TailwindCSS.

Install the package from Hex by adding tw_screen_size to your list of dependencies in mix.exs:

def deps do
  [
    {:tw_screen_size, "~> 0.1.0"}
  ]
end

Ensure Tailwind searches for styles in the tw_screen_size package:

// tailwind.config.js
module.exports = {
  content: [
    //
    "../deps/tw_screen_size/lib/**/*.*ex", // <--- Add this line
    "../deps/tw_screen_size/assets/js/*.*js", // <--- And this one
  ],
  ...
}

Import and integrate the TwScreenSizeHook in your app.js:

// 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 },
});

Import TwScreenSize and add the <.tw_screen_size /> 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 %>
  <!--
  If you're deploying with Releases, Mix.env will be unavailable in production. In this case, set and detect the environment using application config. E.g. `Application.compile_env(:my_app, :env) == :dev`
  -->
  <.tw_screen_size :if={Mix.env() == :dev} />
</body>

Opacity Timeout

The component is always visible by default. If you'd prefer the component to appear temporarily on the first page-load, and on screen resizes, you can set the opacity_timeout attribute:

<.tw_screen_size opacity_timeout={3000} />

All Attributes

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.