tailwindcss-colors-css-variables
Version:
Tailwind CSS color palette as CSS variables
65 lines (64 loc) • 2.04 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>tailwindcss-colors-css-variables</title>
<link
rel="stylesheet"
href="https://unpkg.com/tailwindcss@1.1.2/dist/tailwind.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.color {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05),
0px 0px 0px 1px inset rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="p-12">
<div id="app">
<link ref="style" rel="stylesheet" href="tailwindcss-colors.css" />
<div v-for="(vars, color) in varsGrouped" :key="g" class="mb-8">
<h2 class="text-lg font-medium text-gray-800 mb-2">{{ color }}</h2>
<div v-for="v in vars" :key="v.property" class="flex items-center mb-2">
<span
class="color inline-block w-16 h-16 rounded-full mr-4"
:style="`background-color: var(${v.property});`"
></span>
<span class="font-mono text-gray-600"
>{{ v.property }} (`{{ v.value }}`)</span
>
</div>
</div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
vars: []
},
computed: {
varsGrouped() {
return _.groupBy(
this.vars,
({ property }) => /--tw-color-([^-]+)/.exec(property)[1]
);
}
},
mounted() {
const rule = this.$refs.style.sheet.cssRules[0];
for (const prop of rule.style) {
this.vars.push({
property: prop,
value: rule.style.getPropertyValue(prop).trim()
});
}
}
});
</script>
</body>
</html>