use explicit class names for tailwind inspector

This commit is contained in:
axolotle 2023-07-25 23:11:32 +02:00
parent cf4b85465e
commit 28d0295f0c
2 changed files with 13 additions and 22 deletions

View file

@ -1,18 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
const { t } = useI18n()
const userData = await useUserInfo() const userData = await useUserInfo()
const me = computed(() => { const me = computed(() => {
const appTileColors = [ const appTileColors = [
'red', 'bg-red-500',
'orange', 'bg-orange-500',
'yellow', 'bg-yellow-500',
'lime', 'bg-lime-500',
'green', 'bg-green-500',
'teal', 'bg-teal-500',
'indigo', 'bg-indigo-500',
'sky', 'bg-sky-500',
'purple', 'bg-purple-500',
'rose', 'bg-rose-500',
] ]
if (!userData.value) return if (!userData.value) return
return { return {
@ -40,15 +41,10 @@ const me = computed(() => {
</div> </div>
<ul v-else class="flex space-x-4"> <ul v-else class="flex space-x-4">
<!-- NB : because of the usage of dynamic colors, gotta force tailwind to expose those, cf 'safelisting' -->
<li <li
v-for="app in me.apps" v-for="app in me.apps"
:key="app.id" :key="app.id"
:class=" :class="'text-center leading-none p-5 card h-32 w-32 ' + app.color"
'text-center leading-none p-5 card h-32 w-32 bg-' +
app.color +
'-500'
"
> >
<a> <a>
<div class="text-6xl font-extrabold"> <div class="text-6xl font-extrabold">

View file

@ -1,12 +1,7 @@
module.exports = { module.exports = {
// Safelisting some classes to avoid content purge // Safelisting some classes to avoid content purge
plugins: [require('daisyui')], plugins: [require('daisyui')],
safelist: [ safelist: ['safelisted'],
'safelisted',
{
pattern: /bg-.*-500/,
},
],
daisyui: { daisyui: {
themes: true, themes: true,
}, },