Understanding which browsers Tailwind supports and how to manage vendor prefixes.
In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11.
While most of the features in Tailwind CSS will work in all modern browsers, Tailwind also includes APIs for several bleeding-edge features that aren’t yet supported by all browsers, for example the :focus-visible
pseudo-class and backdrop-filter
utilities.
Since Tailwind is such a low-level framework, it’s easy to avoid these features if you can’t use them by simply not using the utility or modifier that’s not supported, much like how you just wouldn’t use those CSS features in your CSS.
The Can I Use database is a great resource when you’re unsure about the support for an unfamiliar CSS feature.
Many CSS properties require vendor prefixes to be understood by browsers, for example background-clip:
text needs the -webkit
prefix to work in most browsers:
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
If you’re using the Tailwind CLI tool, vendor prefixes like this will be added automatically.
If not, we recommend that you use Autoprefixer, which is a PostCSS plugin that automatically adds any necessary vendor prefixes based on the browsers you tell it you need to support.
To use it, install it via npm:
npm install -D autoprefixer
Then add it to the very end of your plugin list in your PostCSS configuration:
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } }
To learn more about specifying which browsers you need to support, check out Browserslist which is the standard way to define target browsers in front-end tooling.
Be the first to know about new updates and exclusive discounts. No spam, just great offers!
How about
With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.
Hire Us© Domiex Created & Crafted by SRBThemes.