JSFiddle - React, Tailwind, and code Playground

by Arthur Lutkevichus

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/attr -->

<p data-foo="hello">world</p><div class="background" data-background="lime" data-width="20px"></div>

CSS

/* Simple usage */
attr(data-count);
attr(title);

/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);

/* With fallback */
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');
[data-foo]::before {
  content: attr(data-foo) " ";
}html,
body,
.background {
  height: 100vh;
}
.background {
  background-color: red;
}

.background {
  width: attr(data-width, 100vw);
}

.background[data-background] {
  background-color: attr(data-background color, blue);
}