Tailwindcss: Tailwindcss with StencilJS/Web Components

[ansarizafar]

I am trying to use tailwind.css from dist folder with StencilJs/Web components https://stenciljs.com/ but hover styles are not working. Is there any solution available?

[MatiasVerdier]

Maybe you are trying to use some of the modules that don't have the hover variant applied. check the docs https://tailwindcss.com/docs/configuration#modules

[ansarizafar]

Here is what I am trying to do.
<button class="bg-green hover:bg-green-dark text-white font-bold py-2 px-4 rounded-full">Click Me!</button>

[adamwathan]

Can you share a repo that we can clone to try and troubleshoot? I've never heard of StencilJS before so have never used it. If I had to guess, I wonder if it's related to using the : character in our hover class names, especially if StencilJS does some weird compilation or something of the markup.

Try changing it to a different character:

https://tailwindcss.com/docs/configuration#separator

[adamwathan]

Closing this as it's basically impossible this is a Tailwind issue, but feel free to start a discussion on the discuss repo if you'd like to continue the conversation.

[stellasoft-will]

const postcss = require('@stencil/postcss');
const autoprefixer = require('autoprefixer');
const sass = require('@stencil/sass');
const tailwindcss = require('tailwindcss');

exports.config = {
  namespace: 'demo',
  outputTargets:[
    { type: 'dist' },
    { type: 'www' }
  ],
  globalStyle: ['src/app.scss'],
  plugins: [
    sass(),
    postcss({
      plugins: [
        autoprefixer(),
        tailwindcss('./tailwind.js')
      ]
    })
  ]
};

exports.devServer = {
  root: 'www',
  watchGlob: '**/**'
}

I have tailwindcss in the app.scss file, this compiles down to demo.css on build using the postcss plugin @ansarizafar

[MattMcFarland]

@ansarizafar FWIW I got this working using postcss:

import { Config } from '@stencil/core';
import { postcss } from '@stencil/postcss';
import * as autoprefixer from 'autoprefixer';

// https://stenciljs.com/docs/config

export const config: Config = {
  globalStyle: 'src/global/styles.css',  
  plugins: [
    postcss({
      plugins: [
        autoprefixer({
          browsers: ['last 6 versions'],
          cascade: false
        }),
        require('tailwindcss')('./tailwind.js')
      ]
    })
  ]  
};

[sunbot]

@MattMcFarland @stellasoft-will did either of you get this working in typescript? I can't seem to pull in via using require

[harrysbaraini]

@MattMcFarland @stellasoft-will did either of you get this working in typescript? I can't seem to pull in via using require

import tailwindcss from 'tailwindcss';

export const config: Config = {
  globalStyle: 'src/global/styles.css',  
  plugins: [
    postcss({
      plugins: [
        autoprefixer({
          browsers: ['last 6 versions'],
          cascade: false
        }),
        tailwindcss('./tailwind.js')
      ]
    })
  ]  
};