Having issues adding Tailwind+Postcss in lit

[onmax]

Summary

I want to add Tailwind(and for that, I guess I have to use PostCSS) to my lit project, which is using wds.

Details

Hey, I am researching different tools for creating WebComponents, and I came across lit and openWC generator which is perfect for me. But I want to use TailwindCSS for styles. For that reason, I added PostCSS like it is said on the installation page. Adding PostCSS to modern-web seems easy, and I followed the instruction in the docs(first example)

So I executed:

npm i -D rollup-plugin-postcss @web/dev-server-rollup # modern-web plugins
npm i -D tailwindcss postcss autoprefixer # postcss plugins

npx tailwindcss init # Init tailwind config. And I added "mode: jit" to use Just-In-Time

And now if I add tailwind styles in my WebComponent doesn't work:

static styles = css`
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  `;

If I run "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"" works fine and serves the page, the only thing is that styles are not being generated or inject it into the component.

How can I test that PostCSS is working fine in wds? I guess this problem is related more to lit and its configuration rather than wds and PostCSS but I want to make sure this part is correct.

Thanks in advance!!

PD: I also used this tutorial but it's using babel instead of wds

My web-dev-server.config.mjs is:

import rollupPostcss from 'rollup-plugin-postcss';
import { fromRollup } from '@web/dev-server-rollup';

const postcss = fromRollup(rollupPostcss);

const hmr = process.argv.includes('--hmr');

export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
  nodeResolve: true,
  open: '/demo/',
  watch: !hmr,

  // tell the server to serve css files as js
  mimeTypes: {
    '**/*.css': 'js',
  },
  plugins: [
    postcss({
      include: ['src/**/*.css'], modules: true, plugins: {
        tailwindcss: {},
        autoprefixer: {},
      }
    })
  ],
});

[ouweiya]

Use rollup-plugin-lit-css to import css as a module, and use postcss to compile tailwindcss.

npm i rollup-plugin-lit-css @web/dev-server-rollup postcss postcss-load-config

web-dev-server.config.js

import rollupLitcss from 'rollup-plugin-lit-css';
import { fromRollup } from '@web/dev-server-rollup';
import postcss from 'postcss';
import postcssConfig from 'postcss-load-config';

const litcss = fromRollup(rollupLitcss);
const config = await postcssConfig();

export default {
  ...
  plugins: [
    litcss({ transform: (css, { filePath }) => postcss(config.plugins).process(css, { from: filePath }).css }),
  ],
  mimeTypes: {
    '**/*.css': 'js',
  },
};

postcss.config.js

import tailwindcss from 'tailwindcss';

export default {
  plugins: [tailwindcss],
};

Use

import csstxt from './index.css';

@customElement('my-element')
class One extends LitElement {
  static styles = [csstxt];

  render() {
    return html`
      <p class="text-red-500 bg-purple-400">Hello from my template.</p>
    `;
  }
}