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

Autoprefixer not running on development build #160

Open
raguila8 opened this issue Apr 30, 2021 · 0 comments
Open

Autoprefixer not running on development build #160

raguila8 opened this issue Apr 30, 2021 · 0 comments

Comments

@raguila8
Copy link

Hello,

Autoprefixer isnt running on the development build. Certain utility classes won't work on some modern browsers because the vendor prefixes are not added. For example the following HTML

<span class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">
    Hello world
</span>

will render

Screenshot-20210429174156

This is because autoprefixer doesn't add -webkit-background-clip: text; to the utility class.

In the gulpfile.babel.js file adding autoprefixer to the development build would fix it.

return src(PRE_BUILD_STYLESHEET)
  .pipe(
    postcss([
      atimport(),
       tailwindcss(TAILWIND_CONFIG),
      ...(isDevelopmentBuild ? [autoprefixer()] : [autoprefixer(), cssnano()]),
    ])
  )
  .pipe(dest(POST_BUILD_STYLESHEET));

This is related to tailwindlabs/tailwindcss#2300. Adam Wathan says:

We don't include vendor prefixes in Tailwind because every project has different browser requirements, so instead we recommend using Autoprefixer to handle all of that

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

1 participant