Extension / Plugin / Library

@hansf14/postcss-hotfix
PostCSS Hotfix for Safari backdrop-filter compatibility
[Portfolio Project]

1. Introduction

PostCSS Hotfix Plugin for Tailwind CSS Safari Compatibility:
Fixes Safari rendering issues caused by trailing commas in Tailwind CSS generated variables. This plugin ensures your backdrop filters and other CSS effects work consistently across all browsers. Without this plugin, for example, backdrop-filter breaks in some versions of Safari, due to the trailing commas in the generated CSS. Using this PostCSS plugin will fix this kind of issues in TailwindCSS.
What It Fixes:
This PostCSS plugin automatically removes trailing commas from:
  • backdrop-filter properties.
  • filter properties.
  • Any CSS custom properties starting with --tw-.
Browser Support:
  • ✅ Safari - Fixes rendering issues
  • ✅ Chrome - No impact (already worked)
  • ✅ Firefox - No impact (already worked)
  • ✅ Edge - No impact (already worked)
Related Issues:
❌ Before (Broken in Safari):
css
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}


✅ After (Works everywhere):
css
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}


Installation:
bash
# npm
npm install -D @hansf14/postcss-hotfix

# yarn
yarn add -D @hansf14/postcss-hotfix

# pnpm
pnpm add -D @hansf14/postcss-hotfix
Usage:

Add the plugin to your PostCSS configuration. Don't forget to restart your dev server to apply the changes to your postcss config file!

postcss.config.js
javascript
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('@hansf14/postcss-hotfix'),
  ],
}
postcss.config.mjs
javascript
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import postcssHotfix from '@hansf14/postcss-hotfix'

export default {
  plugins: [
    tailwindcss,
    autoprefixer,
    postcssHotfix,
  ],
}
Options

debug?: boolean | undefined

javascript
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import postcssHotfix from '@hansf14/postcss-hotfix'

export default {
  plugins: [
    tailwindcss,
    autoprefixer,
    postcssHotfix({ debug: true }),
  ],
}
Found Tailwind var: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)    
Fixed to: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)

2. Techs

  • Language / Script

  • API

  • IDE

  • VCS

  • Linter / Formatter

  • Package Manager / Dependency Manager

  • Etc.

3. Screenshots

© 2025 hansf14. All Rights Reserved.