custom default styles have been removed by PurgeCSS in nuxt-tailwindcss

Question

In my SSR Nuxt.js project, I am using Nuxt offical tailwindcss-module

I coded a default style for <a></a> tags like below.

/assets/scss/app.scss

a{
    color: color("blue", "base");
    transition: color .3s ease;

    &:hover,&:active{
        color: color("blue", "darken-4");
    }
}

pages/index.vue

<template>
    <nuxt-link to="/login">Login</nuxt-link>
</template>

nuxt.config.js

    buildModules:['@nuxtjs/tailwindcss'],
    css:['@/assets/scss/app.scss']

When I run npm run dev, the PurgeCSS would not work, so the result is what I expected.

But when I run npm run prod, the PurgeCSS of tailwindcss will remove my own style for <a></a> tags in '@/assets/scss/app.scss'

How can I config tailwind.config.js to make custom default styles be rendered in result? Whitelist only accepts classnames/ids.

Thanks a lot!

Answer 1

Try this

/* purgecss start ignore */
a {...}
/* purgecss end ignore */