Tailwindcss workflow with nuxt.js

[jericopulvera]

Hi Guys I've been trying to make this work with nuxt.js smoothly but I am not successful.

Is it possible to implement this together with nuxt without using gulp only webpack?

[Atinux]

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 🎉

[djeglin]

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.

[LannyBose]

@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.

[syropian]

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.

[djeglin]

Interesting. I wonder if it’s possible to somehow set that as a global include…? I might look into that. Cheers. On Thu, Nov 9, 2017 at 19:50, Collin Henderson <notifications@github.com> wrote: 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 [https://github.com/ChristianMurphy/postcss-combine-duplicated-selectors] which will merge any duplicate selectors it finds. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub [#24 (comment)] , or mute the thread [https://github.com/notifications/unsubscribe-auth/AANccNkImjO-_JINh8lhOT2GeC_i6jnEks5s01eZgaJpZM4QQtr7] .

[pxwee5]

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

[syropian]

Use PurgeCSS.

…

Sent from my iPhone

On Nov 28, 2017, at 10:45 PM, pxwee5 ***@***.***> wrote: Anybody has any idea how to do this properly? Using @apply in Nuxt's SFC without the bloat. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[pxwee5]

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.

[syropian]

You should use a Webpack plugin to extract your CSS into a file at build time. Nuxt might already do this with production builds, I'm not too sure.

…

Sent from my iPhone

On Nov 29, 2017, at 1:42 AM, pxwee5 ***@***.***> wrote: 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. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[pxwee5]

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.

[Atinux]

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

[pxwee5]

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.

[01ivr3]

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.

[Atinux]

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

[01ivr3]

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

[johnyluyte]

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-/]
    })
  ]
}

[jericopulvera]

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

[christopher4lis]

@johnyluyte, does this work with inline styles?

[MichMich]

@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-/]
    })
  ]
}

[djeglin]

@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.

[MichMich]

@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.

[djeglin]

@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?

[MichMich]

@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.

[djeglin]

@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.