taylorbryant / jekyll-starter-tailwind

Jekyll starter styled with Tailwind CSS

Home Page:https://jekyll-starter-tailwind.taylorbryant.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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