CODEWITHSUNDEEP
vue.jsnuxt.jstailwind-cssvercelautoprefixer
Nab
Nab

Reputation: 35

How to deploy a nuxt.js project with Tailwindcss 2.0 on vercel zeit

I'm trying to upload a basic nuxt.js project with tailwind.css 2.0. I used :

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

to install tailwindcss 2.0

First I was using npm then yarn but on deployment tailwindcss 2.0 doesn't work. On local it works great.

Upvotes: 0

Views: 596

Answers (1)

Daniel Roe
Daniel Roe

Reputation: 180

I can't really tell without more details, but if you are encountering difficulties in production but not in development for a tailwindcss project - the first thing to check is whether you are using dynamic class names (for example, text-${color}-500). These will be purged in production unless you add them to the allowlist.

UPDATE

Having taken a look at the repo you have provided, it looks like the issue is that Tailwind generates CSS targeting [type='text'] but this is purged by html-minifier in the generated HTML of your Nuxt app (see issue). You can turn off this behaviour with this code in your nuxt.config:

export default {
  build: {
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        // this is the only line we're changing from defaults
        // but we have to include all as they aren't merged
        removeRedundantAttributes: false,
        trimCustomFragments: true,
        useShortDoctype: true
      }
    }
  }
}

Upvotes: 2

Related Questions