Tailwind 2.0 support

[lloydjatkinson]

trafficstars

Hi,

Would it be possible for you to update the library to use the latest version of Tailwind? Currently it uses Tailwind 1.2 which is fairly old and doesn't contain many utilities classes found in Tailwind 2.0.

[gkweb]

Please address this. Required

[RobbieTheWagner]

All deps were just updated, so if a new release goes out this should be fixed.

[ChronicStone]

Hi @rwwagner90, sorry to bother yu but I'd like to know if a release is for soon ? There's really a huge gap between tailwindcss 1.2 and 2.0, so that would really be something helpful !

[RobbieTheWagner]

@ChronicStone this is not my repo. @jrowlingson will have to release a new version.

[gkweb]

@ChronicStone

Hey Guys - This is actually really easy to implement without this plugin using postcss and plugins. All you need is @stencil/postcss and the latest tailwindcss.

Requirements:

npm i -S tailwindcss && npm i -D @stencil/postcss

After that has run - Check the below config - I've annotated the required sections.

import { Config } from '@stencil/core';
import tailwind from 'tailwindcss'; // Required for tailwind 2.x
import { postcss } from '@stencil/postcss';  // Required for tailwind 2.x

export const config: Config = {
  namespace: 'your-namespace-webcomponents',
  devServer: {
    // Your config
  },
  outputTargets: [
   // Your config
  ],
	plugins: [
		postcss({  // Required for tailwind 2.x
			plugins: [
				require('postcss-import'),  // Required for tailwind 2.x
				tailwind("./tailwind.config.js")  // Required for tailwind 2.x
			]
		})
	]
};

[RobbieTheWagner]

@gkweb I think the downside to PostCSS is that it includes all of Tailwind for every component, whereas I think stencil-tailwind tries to just ship one global tailwind.css, but I could be wrong.

[gkweb]

@gkweb I think the downside to PostCSS is that it includes all of Tailwind for every component, whereas I think stencil-tailwind tries to just ship one global tailwind.css, but I could be wrong.

@rwwagner90

Depends on how you configure your components, purgecss and what mode you're building in.

Plenty of information in the docs regarding this.

https://tailwindcss.com/docs/using-with-preprocessors

https://tailwindcss.com/docs/optimizing-for-production#purge-css-options

[RobbieTheWagner]

@gkweb I don't think so. Stencil includes all of Tailwind in each component if you use PostCSS due to the need of importing tailwind for each component. Sure, you can purge it out later, but for development it is extremely slow. I'm pretty sure stencil-tailwind doesn't do that and includes it globally one time.

[gkweb]

@gkweb I don't think so. Stencil includes all of Tailwind in each component if you use PostCSS due to the need of importing tailwind for each component. Sure, you can purge it out later, but for development it is extremely slow. I'm pretty sure stencil-tailwind doesn't do that and includes it globally one time.

@rwwagner90 have you tried this out at all?

The configuration I've shared is working fine for my use case and it's not slow. Feel free to argue the point that this isn't working for me.

Only trying to help 😊

[RobbieTheWagner]

@gkweb I never said it wasn't working for you. I'm saying, with your config, you have to import tailwind into every component, right? With:

@tailwind base;
@tailwind components;
@tailwind utilities;

This means each component gets all of tailwind included during dev, correct? Again, not trying to say you solution doesn't work, just saying if this library makes it so that doesn't happen, seems like a win to include just once, wouldn't you say?

[gkweb]

@rwwagner90 - Ok - So I could also be wrong but my understanding is that this plugin abstracts this complexity away from us BUT still uses a similar pattern. ie: Tailwind included in every scoped stylesheet.

https://github.com/jrowlingson/stencil-tailwind/blob/942a9d3570f84f6bfc990ea06ea2862ac966b5ed/src/app.css#L1

https://github.com/jrowlingson/stencil-tailwind/blob/942a9d3570f84f6bfc990ea06ea2862ac966b5ed/src/index.ts#L56

Was only trying to help with people wanting to use tailwind 2.x now

[RobbieTheWagner]

@gkweb I honestly don't know. @jrowlingson can you confirm if this plugin only includes tailwind one time?

Also, FYI, anyone can use the master branch by installing jrowlingson/stencil-tailwind#master instead of a specific version and it supports Tailwind 2.

[gkweb]

@gkweb I honestly don't know. @jrowlingson can you confirm if this plugin only includes tailwind one time?

Also, FYI, anyone can use the master branch by installing jrowlingson/stencil-tailwind#master instead of a specific version and it supports Tailwind 2.

@rwwagner90

I'll be using the jit release sooner with postcss but thankyou

[eswat2]

i tried the master branch and it seems to work for my simple use case.

Any ETA on when we might get another release? Is there anything we can do to help make it happen?

thanks in advance...

[eswat2]

i built this locally, updated ALL the dependencies to the very latest versions, yarn linked it and then built and deployed my testbed app with it:

https://wc-autos.vercel.app/

Seems to work like a charm. Only had to change one class to support the new font-thin class seen in the header.

[eswat2]

if you are interested in trying out the Tailwind 2.x version of this plugin, i published it as proto-stencil-tailwind

https://www.npmjs.com/package/proto-stencil-tailwind

It's purely a prototype to help others explore this approach for themselves. I tried to update the README to reflect what i've learned and focus on the workflow that the plugin supports best.

Let me know if you have questions or comments...

[Poimen]

@lloydjatkinson @gkweb @rwwagner90

Hi all - just FYI in case you were interested, I've made a slightly different plugin for tailwind 2.0 that specifically targets tailwind's JIT syntax. It also allows for conditional styles, @apply, functional components (with caveats unfortunately), etc.

You can find the plugin at: https://www.npmjs.com/package/stencil-tailwind-plugin

or: https://github.com/Poimen/stencil-tailwind-plugin

I made a small example: https://github.com/Poimen/stencil-tailwind-plugin-example

HTH