feat: add 'backface' utility and update README.md

Added a new utility 'backface' to the 'others' utilities and exported it through 'index.ts'. Updated README.md with usage examples for the new utility. Additionally, rearranged the export of 'letterSpacing' in 'index.ts' for better organization.

Author: everton-dgn

README.md

@@ -567,6 +567,12 @@ There are two types of utility classes, those that simplify the syntax of classe
 
 <br />
 
+- backface-{suffix}:
+  - `<div class="backface-visible" />`.
+  - `<div class="backface-hidden" />`.
+
+<br />
+
 - animate-skeleton:
   - Before: `<div class="animate-pulse bg-slate-200" />`
   - After: `<div class="animate-skeleton" />`.

src/utilities/others/backface.ts

@@ -0,0 +1,18 @@
+import plugin from 'tailwindcss/plugin'
+
+export const backface = plugin(({ addUtilities }) => {
+  addUtilities({
+    '.backface-visible': {
+      'backface-visibility': 'visible',
+      '-moz-backface-visibility': 'visible',
+      '-webkit-backface-visibility': 'visible',
+      '-ms-backface-visibility': 'visible'
+    },
+    '.backface-hidden': {
+      'backface-visibility': 'hidden',
+      '-moz-backface-visibility': 'hidden',
+      '-webkit-backface-visibility': 'hidden',
+      '-ms-backface-visibility': 'hidden'
+    }
+  })
+})

src/utilities/others/index.ts

@@ -1,12 +1,13 @@
 export { backgroundPosition } from './backgroundPosition'
+export { letterSpacing } from './letterSpacing'
 export { scrollbarHide } from './scrollbarHide'
 export { directional } from './directional'
 export { lineHeight } from './lineHeight'
 export { separator } from './separator'
+export { backface } from './backface'
 export { ellipsis } from './ellipsis'
 export { skeleton } from './skeleton'
 export { overflow } from './overflow'
 export { pseudo } from './pseudo'
 export { size } from './size'
 export { gap } from './gap'
-export { letterSpacing } from './letterSpacing'