Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for autoprefixer/postcss for -webkit-* css rules #15

Open
ErwinAI opened this issue Nov 23, 2023 · 1 comment
Open

Support for autoprefixer/postcss for -webkit-* css rules #15

ErwinAI opened this issue Nov 23, 2023 · 1 comment

Comments

@ErwinAI
Copy link
Contributor

ErwinAI commented Nov 23, 2023

Generating for an element that has a class requiring -webkit-* css rules to work in a specific browser, doesn't work as expected.

Required is adding 'autoprefixer' package to the plugins list of PostCSS.
https://tailwindcss.com/docs/browser-support#vendor-prefixes

example
Input:

<div class="bg-clip-text"></div>

Output:

.bg-clip-text {
    background-clip: text
}

Expected output (in Chrome):

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}
@mhsdesign
Copy link
Owner

Hi, for that usecase i think you have to use the lower level api to create your own postcss instance:

https://github.com/mhsdesign/jit-browser-tailwindcss/tree/main#lower-level-api-to-create-tailwind-post-css-plugin

const processor = postcss([
    createTailwindcssPlugin({ tailwindConfig, content }),
    // autoPrefixerPlugin
]);
const { css } = await processor.process(css, { from: undefined });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants