Any plans for TW4?

[tslocke]

There's an issue for the upstream here: remcohaszing/monaco-tailwindcss#96

[mhsdesign]

I also discussed this matter with @ErwinAI and it seems that the CDN code (@tailwind-browser) is now publicly available.
With the introduction of lightning css (which uses rust) its will definitely be more challenging to get it via webassembly in the browser running. But as proven via their playground it is not impossible https://play.tailwindcss.com (i checked that there are no server request and the code in the browser)

I havent deeply looked into tailwind-browser but it seems that this is highly opinionated sadly and boots directly and does $things to the dom. My package is an attempt to have tailwind as a library so it might still make sense to for example copy the generic parts of tailwind-browser into this package.

Anyway ill gladly accept prs. But if tailwind does offer at some point a generic library which is ready to use (without special compilation process on the users end) ill deprecate this library of course.

[merijnponzo]

We are building a Wordpress plugin (for the last 14 months) that uses the mhsdesign/jit-browser-tailwindcss as a css parser and it works great.

First we used the tailwind playground in the editor, and your package to purge the used css but that was giving different and hard to follow results. Now we track changes and use the mhsdesign/jit-browser-tailwindcss all of the time to render css on the fly, it works great

The playground is using the intersection observer API, as i believe, and it's indeed very opinionated - with the playground tw 3 you can change the config but not in 4.

As soon we are up & running we will give credits to this repo and hopefully more :-)

[locotor]

We building a chrome plugin base on this to generate css，this lib works great！hope for v4 support

[jlukic]

I've done some work today on getting Oxide to work on the client. I was able to modify the source to remove threading for unknown-unknown target and compile a wasm file that can be used in the browser.

Changes to tailwinds here to compile wasm: tailwindlabs/tailwindcss#18292

I'm going to release an npm package to do this but im a bit tired as ive been working on this all day, so perhaps sometime soon.
Semantic-Org/Semantic-Next#70

You can view an implementation using the wasm here
https://github.com/Semantic-Org/Semantic-Next/tree/55f1c6acc1e59e5334d207aa53b39be8c80978bb/packages/tailwind/

[suasgn]

Changes to tailwinds here to compile wasm: tailwindlabs/tailwindcss#18292

If this PR are get merged, I can finally deprecated my package https://github.com/wind-press/oxide-parser-wasm

[merijnponzo]

@jlukic fantastic work.
I tested and played around a bit, since tailwind 4 is not longer using prefix inside the tailwind.config.js you have to define it outside

the config

@import "tailwindcss" prefix(tw);

So adding the type tailwindCSS will allow you to do so without linting errors:

interface GenerateTailwindCSSOptions {
  /**
   * A string containing the HTML or JavaScript content to be scanned for Tailwind classes.
   */
  content: string;
  /**
   * Optional. Existing CSS string to be prepended to the generated Tailwind CSS.
   */
  css?: string;
  /**
   * Optional. A custom Tailwind CSS configuration object.
   */
  config?: Config;

  /**
   * Optional. A prefix to be applied to all Tailwind classes in the generated CSS.
   * This is useful for avoiding class name conflicts.
   */
  tailwindCSS?: string;
}

usage:

const myHtmlContent = `
  <div class="tw:p-4">
    Hello, world!
  </div>
`;

(async () => {
  console.log('Generating Tailwind CSS...');

  const tailwindCSS = `@import "tailwindcss" prefix(tw);`;

  const css = await generateTailwindCSS({
    content: myHtmlContent,
    tailwindCSS,
    
  });

  // The `css` variable now contains the generated Tailwind styles.
  // You can inject this into a <style> tag or save it to a file.
  console.log(css);
})();

I also tested disabling preflight and that works as well

import { generateTailwindCSS } from '@blockbite/tailwind-css-parser';

const myHtmlContent = `
  <div class="p-4">
    Hello, world!
  </div>
`;

(async () => {
  console.log('Generating Tailwind CSS...');

  const css = await generateTailwindCSS({
    content: myHtmlContent,
    css: '', // You can leave this empty if you don't have additional CSS to include
    tailwindCSS: `
    @layer theme, components, utilities;
    @import "tailwindcss/theme.css" layer(theme);
    @import "tailwindcss/utilities.css" layer(utilities);

    `
  });

  // The `css` variable now contains the generated Tailwind styles.
  // You can inject this into a <style> tag or save it to a file.
  console.log('css?',css);
})();

Again, great work !

[jlukic]

Okay its published to npm now

https://github.com/Semantic-Org/tailwindcss-iso

https://www.npmjs.com/package/tailwindcss-iso

Live example: https://next.semantic-ui.com/examples/tailwind

npm install tailwindcss-iso

example code

import { generateTailwindCSS } from 'tailwindcss-iso';

const css = '
  @theme {
    /* This changes the bluish grays to a monochrome color */
    --color-gray-100: theme(colors.zinc.100);
    --color-gray-300: theme(colors.zinc.300);
    --color-gray-700: theme(colors.zinc.700);
    --color-gray-950: theme(colors.zinc.950);
  }
'

const content = `
  <div class="p-4 bg-blue-500 text-white rounded-md hover:bg-blue-600">
    Hello, world!
  </div>
`;

const tailwindCSS = await generateTailwindCSS({ content, css });

// The `tailwindCSS` variable now contains the generated Tailwind styles.
// You can inject this into a <style> tag or save it to a file.
console.log(tailwindCSS);