Tailwindcss workflow with nuxt.js about discuss HOT 24 CLOSED

Hi @jericopulvera

I just made an official example to use Tailwindcss with Nuxt.js, source code: https://github.com/nuxt/nuxt.js/tree/dev/examples/tailwindcss

Demo: https://tailwindcss.nuxtjs.org/

Enjoy 🎉

from discuss.

For Nuxt2 project:

1. Create new project with npx create-nuxt-app
2. Enable Tailwind when asked during the installation
3. Install purgeCSS, npm i -D @fullhuman/postcss-purgecss
4. Edit postcss.config.js as mentioned here by @francoislevesque

...
const purgecss = require('@fullhuman/postcss-purgecss')
...
  plugins: [
    require('tailwindcss')(tailwindJS),
    require('autoprefixer'),
    purgecss({
      content: [
        './pages/**/*.vue',
        './layouts/**/*.vue',
        './components/**/*.vue'
      ],
      whitelist: ['html', 'body'],
      whitelistPatterns: [/nuxt-/]
    })
  ]
}

from discuss.

Hi @Atinux

Thanks for your example. It doesn't cover the composability use case for Tailwind, though.

For example, if I do the following:

<template lang="nunjucks">
  <section class="container">
    ...
  </section>
</template>

<script>
  ...
</script>

<style lang="postcss">
  .container {
    @apply .container .mx-auto;
  }
</style>

I get an error that .container can't be found. I've been looking at ways to get around this, but thus far haven't been able to figure out how to get the nuxt renderer to figure out where to apply the tailwind rules from.

Any thoughts?

Cheers.

from discuss.

@djeglin I'm not sure anyone's got the magic potion for using @apply in Vue templates.

See also: tailwindcss/tailwindcss#150 and tailwindcss/tailwindcss#1

Kind of a bummer. Right now I'm just avoiding the <style> portion of my Vue components altogether, and that's only an option because I'm just at the moment in my project where I can make that decision without having to rip out a lot of work.

from discuss.

To get @apply rules to work in your style block you have to include @tailwind utilities; at the top. Of course this will duplicate the Tailwind code for each component that uses it, but you can mitigate this using https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors which will merge any duplicate selectors it finds.

from discuss.

from discuss.

Anybody has any idea how to do this properly? Using @apply in Nuxt's SFC without the bloat.

from discuss.

from discuss.

Purge CSS did manage to reduce most of the TW utilities in the main.css file. However, they are all included in the code splitted .js files.

from discuss.

from discuss.

From pi0

extractCSS: true

A resource like common.6d1aa5fdae9889963c5a.css is emitted but just for global css imports not components <style> part.
A link like <link rel="stylesheet" href="/_nuxt/common.6d1aa5fdae9889963c5a.css"> is added to every page using vue bundle renderer.
Component level styles are being bundled with each page js file. This helps keeping global CSS as minimum as possible.
On Each SSR request, vue bundle renderer detects page component and should inline it on page header like this <style data-vue-ssr-id="1f17c714:0 02c604cb:0">html...

It's the bold part that gets doesn't get purged by PurgeCSS.

from discuss.

In next release of Nuxt, you will be able to say to extract all chunks into the common.css file, see nuxt/nuxt#2081

from discuss.

True you're correct. However, that means you lose the ability to load css on demand. When you have hundreds of components these styles add up.

The closest thing I found is using config() to grab data from the TW config file and use them.

Until there's a true support for TW in Nuxt.

from discuss.

Hey @Atinux, I was just playing with your Nuxt.js tailwind example

It seems to include both Tailwind's preflight reset and utilities into one css file like in Tailwind's Installation docs.

But then Nuxt adds any <style> blocks contained in Vue components after Tailwind's utilities classes in the html header.

Wouldn't it be better if Tailwind's utility classes were imported after these component styles? Thisway it wouldn't be necessary to move all component styles into the middle of ./assets/css/tailwind.css

Apologies if I'm completely off base here. Just a thought.

from discuss.

Hi @01ivr3

Actually there is not better solution at the moment but we are trying to find a way to make Tailwind works nicely with Vue and so with Nuxt.js

from discuss.

@Atinux thanks for the reply! stoked to hear you guys are working on that ;)

from discuss.

@johnyluyte the link you provided in step 4 does not show postcss.config.js code

from discuss.

@johnyluyte, does this work with inline styles?

from discuss.

@johnyluyte A small suggestion: your suggestion does not handle the tailwind classes that use spacial characters like hover:bg-red and w-1/2 well. To fix this, we need to include an extractor:

const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
const purgecss = require('@fullhuman/postcss-purgecss')

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:/]+/g) || []
  }
}

module.exports = {
  plugins: [
    require('tailwindcss')(tailwindJS),
    require('autoprefixer'),
    purgecss({
      content: [
        './pages/**/*.vue',
        './layouts/**/*.vue',
        './components/**/*.vue'
      ],
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ['vue']
        }
      ],
      whitelist: ['html', 'body'],
      whitelistPatterns: [/nuxt-/]
    })
  ]
}

from discuss.

@MichMich You can now enable an option for shadowLookup, documented here: https://github.com/tailwindcss/tailwindcss/releases#allow-applying-classes-that-arent-defined-but-would-be-generated

This handles this use case without the need to import the main Tailwind css file in each component, and without the need to run purgeCSS. I believe this negates the need for this issue to be open any longer.

Cheers.

from discuss.

@djeglin Not sure if I understand correctly. But it seems that has a different purpose. Without the above config the CSS will not be purged.

from discuss.

@MichMich The conversation here was about allowing Tailwind classes to be @applyed in Vue single file components. The shadowLookup feature referenced above makes this possible without the actual generated CSS needing to be imported into the component at all, thus the lack of need for an extractor or the purgeCSS - The unneeded classes won't be there in the first place unless you specifically tell them to be by importing them (or by generating them as an asset and including them in your head config).

This allows for the following in a Vue component file:

<style scoped>
section {
  @apply flex flex-wrap justify-between;
}
section > div {
  @apply w-1/3 p-8 border-2 rounded-xl bg-white;
}
</style>

... but the only CSS that will actually be output will be the those selectors and the result of those @apply statements - The rest of the Tailwind CSS won't end up being included. No importing, no purging, no extracting, just simple.

Does that make sense, and match your use case?

from discuss.

@djeglin I was looking for the correct way to incorporate PurgeCSS and stumbled upon @johnyluyte's comment. This solved the issue for me with one minor issue as discussed in my reply. I posted my solution for anyone looking for the same info. It might be a tiny bit offtopic, but since I found my answer here I though it was good to add a small piece of information for others that are looking for the same info.

from discuss.

@MichMich Fair enough, that makes sense. FWIW, the shadowLookup method will result in significantly faster builds than using purgeCSS, but its good to mark the information down for others.

from discuss.