Skip to content

Autoprefixer not running on development build #160

@raguila8

Description

@raguila8

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions