Skip to content

Instantly share code, notes, and snippets.

@pryley

pryley/debug.css

Last active August 5, 2020 00:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pryley/426a57958223a76ddc49fa7f751a2751 to your computer and use it in GitHub Desktop.
Save pryley/426a57958223a76ddc49fa7f751a2751 to your computer and use it in GitHub Desktop.
Download ZIP
[tailwindcss] Display screen breakpoints on the local environment
Raw
debug.css
body.debug::before {
@apply .bg-gray-900;
@apply .fixed;
@apply .font-mono;
@apply .leading-none;
@apply .left-0;
@apply .pointer-events-none;
@apply .px-2;
@apply .py-1;
@apply .text-white;
@apply .top-0;
@apply .uppercase;
content: 'ba';
font-size: 10px;
z-index: 999999;
@screen sm {
content: 'sm';
}
@screen md {
content: 'md';
}
@screen lg {
content: 'lg';
}
@screen xl {
content: 'xl';
}
@screen hd {
content: 'hd';
}
}
Raw
layout.antlers.html
<body class="{{ environment == 'local' ? 'debug' : '' }}">
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment