feat: make lib compatible with tailwindcss 1.8 (#52)

* feat: add font variant utils

* fix: add fontVariantNumeric to default config

* feat: add justify items utils

* feat: add justify self utils

* feat: add place content utils

* feat: add place items utils

* feat: add place self utils

* feat: update the lib with new utils from the cli

package.json

@@ -86,7 +86,7 @@
     "rollup-plugin-terser": "^5.3.0",
     "semver": "^7.3.2",
     "standard-version": "^8.0.0",
-    "tailwindcss": "^1.7.6",
+    "tailwindcss": "^1.8.7",
     "ts-jest": "~23.10.0",
     "typescript": "^3.1.4"
   }

src/cli/default-classes/Flexbox.ts

@@ -14,6 +14,32 @@ const alignContent = [
 
 const alignSelf = ['self-auto', 'self-start', 'self-center', 'self-end', 'self-stretch'];
 
+const placeContent = [
+  'place-content-start',
+  'place-content-center',
+  'place-content-end',
+  'place-content-between',
+  'place-content-around',
+  'place-content-evenly',
+  'place-content-stretch',
+];
+
+const placeItems = [
+  'place-items-auto',
+  'place-items-start',
+  'place-items-center',
+  'place-items-end',
+  'place-items-stretch',
+];
+
+const placeSelf = [
+  'place-self-auto',
+  'place-self-start',
+  'place-self-center',
+  'place-self-end',
+  'place-self-stretch',
+];
+
 const justifyContent = [
   'justify-start',
   'justify-center',
@@ -22,6 +48,22 @@ const justifyContent = [
   'justify-around',
 ];
 
+const justifyItems = [
+  'justify-items-auto',
+  'justify-items-start',
+  'justify-items-center',
+  'justify-items-end',
+  'justify-items-stretch',
+];
+
+const justifySelf = [
+  'justify-self-auto',
+  'justify-self-start',
+  'justify-self-center',
+  'justify-self-end',
+  'justify-self-stretch',
+];
+
 const flex = ['flex-initial', 'flex-1', 'flex-auto', 'flex-none'];
 
 const flexGrow = ['flex-grow', 'flex-grow-0'];
@@ -52,7 +94,12 @@ export const FlexBox = {
   alignItems,
   alignContent,
   alignSelf,
+  placeContent,
+  placeItems,
+  placeSelf,
   justifyContent,
+  justifyItems,
+  justifySelf,
   flex,
   flexGrow,
   flexShrink,

src/cli/default-classes/Typography.ts

@@ -29,6 +29,18 @@ const fontWeight = [
   'font-black',
 ];
 
+const fontVariantNumeric = [
+  'normal-nums',
+  'ordinal',
+  'slashed-zero',
+  'lining-nums',
+  'oldstyle-nums',
+  'proportional-nums',
+  'tabular-nums',
+  'diagonal-fractions',
+  'stacked-fractions',
+];
+
 const letterSpacing = [
   'tracking-tighter',
   'tracking-tight',
@@ -298,6 +310,7 @@ export const Typography = {
   fontSmoothing,
   fontStyle,
   fontWeight,
+  fontVariantNumeric,
   letterSpacing,
   lineHeight,
   listStyleType,

src/cli/utils/defaultTailwindConfig.ts

@@ -702,11 +702,14 @@ export const defaultVariants: Record<string, string[]> = {
   fontFamily: ['responsive'],
   fontSize: ['responsive'],
   fontSmoothing: ['responsive'],
+  fontVariantNumeric: ['responsive'],
   fontStyle: ['responsive'],
   fontWeight: ['responsive', 'hover', 'focus'],
   height: ['responsive'],
   inset: ['responsive'],
   justifyContent: ['responsive'],
+  justifyItems: ['responsive'],
+  justifySelf: ['responsive'],
   letterSpacing: ['responsive'],
   lineHeight: ['responsive'],
   listStylePosition: ['responsive'],
@@ -724,6 +727,9 @@ export const defaultVariants: Record<string, string[]> = {
   overflow: ['responsive'],
   overscrollBehavior: ['responsive'],
   padding: ['responsive'],
+  placeContent: ['responsive'],
+  placeItems: ['responsive'],
+  placeSelf: ['responsive'],
   placeholderColor: ['responsive', 'focus'],
   placeholderOpacity: ['responsive', 'focus'],
   pointerEvents: ['responsive'],