Tailwind as framework is free , but what you are paying with Winden is optimisation and integration.
With tailwind we are removing every repetition and making the best optimisation for the playground (CDN) and also production.
server update brings Autoprefixer by the default
Why do you need autoprefixer?
Using Autoprefixer with Tailwind CSS can seem a bit redundant at first, considering Tailwind CSS includes its own set of prefixes for CSS properties that require them for cross-browser compatibility. However, there are specific scenarios and reasons where integrating Autoprefixer into your project alongside Tailwind CSS can be beneficial:
- Additional Browser Support: While Tailwind CSS does cover a broad range of browser support through its built-in prefixes, Autoprefixer can provide additional support based on your specific project requirements. This is particularly useful if you need to support older browsers or specific versions that are not covered by Tailwind’s defaults.
- Custom CSS: In projects where you’re mixing Tailwind CSS with custom CSS, Autoprefixer can ensure that your custom styles are also automatically vendor-prefixed. This helps maintain consistency across all your stylesheets, ensuring that they work as expected across different browsers.
- Updated Prefixes: Autoprefixer relies on the data from Can I Use, which is regularly updated. This means it can automatically apply newer prefixes or remove unnecessary ones based on the latest browser support data. Even though Tailwind CSS is updated regularly, there might be instances where Autoprefixer is more up-to-date with the very latest browser changes.
- Configurable Browser Support: Autoprefixer allows you to specify the range of browsers you want to support through the “browserslist” configuration in your project. This level of customization can be beneficial for projects with specific audience or requirements, ensuring that you’re only adding the necessary prefixes for your target browsers.
- Optimization: By using Autoprefixer, you can ensure that only the necessary prefixes are included in your final CSS, potentially reducing the size of your stylesheets. This is because it adds prefixes based on your project’s browser support requirements, avoiding the inclusion of unnecessary prefixes that might be present in a more generic, broadly-supportive library like Tailwind CSS.
Background blur with autoprefixer
In example bellow autoprefixer is adding web-kit support for backdrop-filter in safari.
Background blur without autoprefixer
This is safari without autoprefixer web-kit support
