Autoprefixer not running on development build
raguila8 opened this issue · comments
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
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