Copy JIT over, tests passing separately, not yet integrated

jit/corePlugins/accessibility.js

@@ -0,0 +1,25 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.sr-only': {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: '0',
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    borderWidth: '0',
+  },
+  '.not-sr-only': {
+    position: 'static',
+    width: 'auto',
+    height: 'auto',
+    padding: '0',
+    margin: '0',
+    overflow: 'visible',
+    clip: 'auto',
+    whiteSpace: 'normal',
+  },
+})

jit/corePlugins/alignContent.js

@@ -0,0 +1,22 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.content-center': {
+    'align-content': 'center',
+  },
+  '.content-start': {
+    'align-content': 'flex-start',
+  },
+  '.content-end': {
+    'align-content': 'flex-end',
+  },
+  '.content-between': {
+    'align-content': 'space-between',
+  },
+  '.content-around': {
+    'align-content': 'space-around',
+  },
+  '.content-evenly': {
+    'align-content': 'space-evenly',
+  },
+})

jit/corePlugins/alignItems.js

@@ -0,0 +1,19 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.items-start': {
+    'align-items': 'flex-start',
+  },
+  '.items-end': {
+    'align-items': 'flex-end',
+  },
+  '.items-center': {
+    'align-items': 'center',
+  },
+  '.items-baseline': {
+    'align-items': 'baseline',
+  },
+  '.items-stretch': {
+    'align-items': 'stretch',
+  },
+})

jit/corePlugins/alignSelf.js

@@ -0,0 +1,19 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.self-auto': {
+    'align-self': 'auto',
+  },
+  '.self-start': {
+    'align-self': 'flex-start',
+  },
+  '.self-end': {
+    'align-self': 'flex-end',
+  },
+  '.self-center': {
+    'align-self': 'center',
+  },
+  '.self-stretch': {
+    'align-self': 'stretch',
+  },
+})

jit/corePlugins/animation.js

@@ -0,0 +1,39 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const parseAnimationValue = require('tailwindcss/lib/util/parseAnimationValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let keyframes = Object.fromEntries(
+    Object.entries(theme.keyframes).map(([key, value]) => {
+      return [
+        key,
+        [
+          {
+            [`@keyframes ${key}`]: value,
+          },
+          { respectVariants: false },
+        ],
+      ]
+    })
+  )
+
+  let transformValue = transformThemeValue('animation')
+  matchUtilities({
+    animate: [
+      (modifier, { theme }) => {
+        let value = transformValue(theme.animation[modifier])
+
+        if (modifier === '' || value === undefined) {
+          return []
+        }
+
+        let { name: animationName } = parseAnimationValue(value)
+
+        return [
+          keyframes[animationName],
+          { [nameClass('animate', modifier)]: { animation: value } },
+        ].filter(Boolean)
+      },
+    ],
+  })
+}

jit/corePlugins/appearance.js

@@ -0,0 +1,5 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.appearance-none': { appearance: 'none' },
+})

jit/corePlugins/backgroundAttachment.js

@@ -0,0 +1,7 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.bg-fixed': { 'background-attachment': 'fixed' },
+  '.bg-local': { 'background-attachment': 'local' },
+  '.bg-scroll': { 'background-attachment': 'scroll' },
+})

jit/corePlugins/backgroundClip.js

@@ -0,0 +1,8 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.bg-clip-border': { 'background-clip': 'border-box' },
+  '.bg-clip-padding': { 'background-clip': 'padding-box' },
+  '.bg-clip-content': { 'background-clip': 'content-box' },
+  '.bg-clip-text': { 'background-clip': 'text' },
+})

jit/corePlugins/backgroundColor.js

@@ -0,0 +1,27 @@
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let colorPalette = flattenColorPalette(theme.backgroundColor)
+
+  matchUtilities({
+    bg: (modifier, { theme }) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('bg', modifier)]: withAlphaVariable({
+          color: value,
+          property: 'background-color',
+          variable: '--tw-bg-opacity',
+        }),
+      }
+    },
+  })
+}

jit/corePlugins/backgroundImage.js

@@ -0,0 +1,15 @@
+const { nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    bg: (modifier, { theme }) => {
+      let value = theme.backgroundImage[modifier]
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('bg', modifier)]: { 'background-image': value } }
+    },
+  })
+}

jit/corePlugins/backgroundOpacity.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme, addVariant, e } }) {
+  matchUtilities({
+    'bg-opacity': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.backgroundOpacity)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('bg-opacity', modifier)]: { '--tw-bg-opacity': value } }
+    },
+  })
+}

jit/corePlugins/backgroundPosition.js

@@ -0,0 +1,15 @@
+const { nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    bg: (modifier, { theme }) => {
+      let value = theme.backgroundPosition[modifier]
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('bg', modifier)]: { 'background-position': value } }
+    },
+  })
+}

jit/corePlugins/backgroundRepeat.js

@@ -0,0 +1,10 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.bg-repeat': { 'background-repeat': 'repeat' },
+  '.bg-no-repeat': { 'background-repeat': 'no-repeat' },
+  '.bg-repeat-x': { 'background-repeat': 'repeat-x' },
+  '.bg-repeat-y': { 'background-repeat': 'repeat-y' },
+  '.bg-repeat-round': { 'background-repeat': 'round' },
+  '.bg-repeat-space': { 'background-repeat': 'space' },
+})

jit/corePlugins/backgroundSize.js

@@ -0,0 +1,15 @@
+const { nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    bg: (modifier, { theme }) => {
+      let value = theme.backgroundSize[modifier]
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('bg', modifier)]: { 'background-size': value } }
+    },
+  })
+}

jit/corePlugins/borderCollapse.js

@@ -0,0 +1,6 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.border-collapse': { 'border-collapse': 'collapse' },
+  '.border-separate': { 'border-collapse': 'separate' },
+})

jit/corePlugins/borderColor.js

@@ -0,0 +1,30 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let colorPalette = flattenColorPalette(theme.borderColor)
+
+  matchUtilities({
+    border: (modifier, { theme }) => {
+      if (modifier === 'DEFAULT') {
+        return []
+      }
+
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('border', modifier)]: withAlphaVariable({
+          color: value,
+          property: 'border-color',
+          variable: '--tw-border-opacity',
+        }),
+      }
+    },
+  })
+}

jit/corePlugins/borderOpacity.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'border-opacity': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.borderOpacity)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('border-opacity', modifier)]: { '--tw-border-opacity': value } }
+    },
+  })
+}

jit/corePlugins/borderRadius.js

@@ -0,0 +1,111 @@
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    rounded: (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('rounded', modifier)]: { 'border-radius': value } }
+    },
+  })
+  matchUtilities({
+    'rounded-t': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('rounded-t', modifier)]: {
+          'border-top-left-radius': value,
+          'border-top-right-radius': value,
+        },
+      }
+    },
+    'rounded-r': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('rounded-r', modifier)]: {
+          'border-top-right-radius': value,
+          'border-bottom-right-radius': value,
+        },
+      }
+    },
+    'rounded-b': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('rounded-b', modifier)]: {
+          'border-bottom-right-radius': value,
+          'border-bottom-left-radius': value,
+        },
+      }
+    },
+    'rounded-l': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('rounded-l', modifier)]: {
+          'border-top-left-radius': value,
+          'border-bottom-left-radius': value,
+        },
+      }
+    },
+  })
+  matchUtilities({
+    'rounded-tl': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('rounded-tl', modifier)]: { 'border-top-left-radius': value } }
+    },
+    'rounded-tr': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('rounded-tr', modifier)]: { 'border-top-right-radius': value } }
+    },
+    'rounded-br': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('rounded-br', modifier)]: { 'border-bottom-right-radius': value } }
+    },
+    'rounded-bl': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderRadius'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('rounded-bl', modifier)]: { 'border-bottom-left-radius': value } }
+    },
+  })
+}

jit/corePlugins/borderStyle.js

@@ -0,0 +1,19 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.border-solid': {
+    'border-style': 'solid',
+  },
+  '.border-dashed': {
+    'border-style': 'dashed',
+  },
+  '.border-dotted': {
+    'border-style': 'dotted',
+  },
+  '.border-double': {
+    'border-style': 'double',
+  },
+  '.border-none': {
+    'border-style': 'none',
+  },
+})

jit/corePlugins/borderWidth.js

@@ -0,0 +1,53 @@
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    border: (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('border', modifier)]: { 'border-width': value } }
+    },
+  })
+  matchUtilities({
+    'border-t': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('border-t', modifier)]: { 'border-top-width': value } }
+    },
+    'border-r': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('border-r', modifier)]: { 'border-right-width': value } }
+    },
+    'border-b': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('border-b', modifier)]: { 'border-bottom-width': value } }
+    },
+    'border-l': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['borderWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('border-l', modifier)]: { 'border-left-width': value } }
+    },
+  })
+}

jit/corePlugins/boxShadow.js

@@ -0,0 +1,37 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+let transformValue = transformThemeValue('boxShadow')
+let shadowReset = {
+  '*': {
+    '--tw-shadow': '0 0 #0000',
+  },
+}
+
+module.exports = function ({ addBase, matchUtilities, jit: { theme } }) {
+  addBase(shadowReset)
+  matchUtilities({
+    shadow: (modifier, { theme }) => {
+      modifier = modifier === '' ? 'DEFAULT' : modifier
+
+      let value = transformValue(theme.boxShadow[modifier])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return [
+        {
+          [nameClass('shadow', modifier)]: {
+            '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
+            'box-shadow': [
+              `var(--tw-ring-offset-shadow, 0 0 #0000)`,
+              `var(--tw-ring-shadow, 0 0 #0000)`,
+              `var(--tw-shadow)`,
+            ].join(', '),
+          },
+        },
+      ]
+    },
+  })
+}

jit/corePlugins/boxSizing.js

@@ -0,0 +1,6 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.box-border': { 'box-sizing': 'border-box' },
+  '.box-content': { 'box-sizing': 'content-box' },
+})

jit/corePlugins/clear.js

@@ -0,0 +1,8 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.clear-left': { clear: 'left' },
+  '.clear-right': { clear: 'right' },
+  '.clear-both': { clear: 'both' },
+  '.clear-none': { clear: 'none' },
+})

jit/corePlugins/container.js

@@ -0,0 +1,3 @@
+const container = require('tailwindcss/lib/plugins/container')
+
+module.exports = container()

jit/corePlugins/css/preflight.css

@@ -0,0 +1,240 @@
+/**
+ * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
+ * A thin layer on top of normalize.css that provides a starting point more
+ * suitable for web applications.
+ */
+
+/**
+ * Removes the default spacing and border for appropriate elements.
+ */
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+button {
+  background-color: transparent;
+  background-image: none;
+}
+
+/**
+ * Work around a Firefox/IE bug where the transparent `button` background
+ * results in a loss of the default `button` focus styles.
+ */
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Tailwind custom reset styles
+ */
+
+/**
+ * 1. Use the user's configured `sans` font-family (with Tailwind's default
+ *    sans-serif font stack as a fallback) as a sane default.
+ * 2. Use Tailwind's default "normal" line-height so the user isn't forced
+ *    to override it to ensure consistency even when using the default theme.
+ */
+
+html {
+  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 1 */
+  line-height: 1.5; /* 2 */
+}
+
+
+/**
+ * Inherit font-family and line-height from `html` so users can set them as
+ * a class directly on the `html` element.
+ */
+
+body {
+  font-family: inherit;
+  line-height: inherit;
+}
+
+/**
+ * 1. Prevent padding and border from affecting element width.
+ *
+ *    We used to set this in the html element and inherit from
+ *    the parent element for everything else. This caused issues
+ *    in shadow-dom-enhanced elements like <details> where the content
+ *    is wrapped by a div with box-sizing set to `content-box`.
+ *
+ *    https://github.com/mozdevs/cssremedy/issues/4
+ *
+ *
+ * 2. Allow adding a border to an element by just adding a border-width.
+ *
+ *    By default, the way the browser specifies that an element should have no
+ *    border is by setting it's border-style to `none` in the user-agent
+ *    stylesheet.
+ *
+ *    In order to easily add borders to elements by just setting the `border-width`
+ *    property, we change the default border-style for all elements to `solid`, and
+ *    use border-width to hide them instead. This way our `border` utilities only
+ *    need to set the `border-width` property instead of the entire `border`
+ *    shorthand, making our border utilities much more straightforward to compose.
+ *
+ *    https://github.com/tailwindcss/tailwindcss/pull/116
+ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
+}
+
+/*
+ * Ensure horizontal rules are visible by default
+ */
+
+hr {
+  border-top-width: 1px;
+}
+
+/**
+ * Undo the `border-style: none` reset that Normalize applies to images so that
+ * our `border-{width}` utilities have the expected effect.
+ *
+ * The Normalize reset is unnecessary for us since we default the border-width
+ * to 0 on all elements.
+ *
+ * https://github.com/tailwindcss/tailwindcss/issues/362
+ */
+
+img {
+  border-style: solid;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: theme('colors.gray.400', #a1a1aa);
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/**
+ * Reset links to optimize for opt-in styling instead of
+ * opt-out.
+ */
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/**
+ * Reset form element properties that are easy to forget to
+ * style explicitly so you don't inadvertently introduce
+ * styles that deviate from your design system. These styles
+ * supplement a partial reset that is already applied by
+ * normalize.css.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+/**
+ * Use the configured 'mono' font family for elements that
+ * are expected to be rendered with a monospace font, falling
+ * back to the system monospace stack if there is no configured
+ * 'mono' font family.
+ */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+}
+
+/**
+ * Make replaced elements `display: block` by default as that's
+ * the behavior you want almost all of the time. Inspired by
+ * CSS Remedy, with `svg` added as well.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+/**
+ * Constrain images and videos to the parent width and preserve
+ * their instrinsic aspect ratio.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}

jit/corePlugins/cursor.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    cursor: (modifier, { theme }) => {
+      let value = asValue(modifier, theme.cursor)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('cursor', modifier)]: { cursor: value } }
+    },
+  })
+}

jit/corePlugins/display.js

@@ -0,0 +1,27 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = [
+  createSimpleStaticUtilityPlugin({
+    '.block': { display: 'block' },
+    '.inline-block': { display: 'inline-block' },
+    '.inline': { display: 'inline' },
+    '.flex': { display: 'flex' },
+    '.inline-flex': { display: 'inline-flex' },
+    '.table': { display: 'table' },
+    '.table-caption': { display: 'table-caption' },
+    '.table-cell': { display: 'table-cell' },
+    '.table-column': { display: 'table-column' },
+    '.table-column-group': { display: 'table-column-group' },
+    '.table-footer-group': { display: 'table-footer-group' },
+    '.table-header-group': { display: 'table-header-group' },
+    '.table-row-group': { display: 'table-row-group' },
+    '.table-row': { display: 'table-row' },
+    '.flow-root': { display: 'flow-root' },
+    '.grid': { display: 'grid' },
+    '.inline-grid': { display: 'inline-grid' },
+    '.contents': { display: 'contents' },
+  }),
+  createSimpleStaticUtilityPlugin({
+    '.hidden': { display: 'none' },
+  }),
+]

jit/corePlugins/divideColor.js

@@ -0,0 +1,27 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let colorPalette = flattenColorPalette(theme.divideColor)
+
+  // TODO: Make sure there is no issue with DEFAULT here
+  matchUtilities({
+    divide: (modifier, { theme }) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`]: withAlphaVariable({
+          color: colorPalette[modifier],
+          property: 'border-color',
+          variable: '--tw-divide-opacity',
+        }),
+      }
+    },
+  })
+}

jit/corePlugins/divideOpacity.js

@@ -0,0 +1,19 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'divide-opacity': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.divideOpacity)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [`${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
+          '--tw-divide-opacity': value,
+        },
+      }
+    },
+  })
+}

jit/corePlugins/divideStyle.js

@@ -0,0 +1,19 @@
+module.exports = function ({ addUtilities }) {
+  addUtilities({
+    '.divide-solid > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'solid',
+    },
+    '.divide-dashed > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'dashed',
+    },
+    '.divide-dotted > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'dotted',
+    },
+    '.divide-double > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'double',
+    },
+    '.divide-none > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'none',
+    },
+  })
+}

jit/corePlugins/divideWidth.js

@@ -0,0 +1,49 @@
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ addUtilities, matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'divide-x': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['divideWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      value = value === '0' ? '0px' : value
+
+      return {
+        [`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
+          '--tw-divide-x-reverse': '0',
+          'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`,
+          'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
+        },
+      }
+    },
+    'divide-y': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['divideWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      value = value === '0' ? '0px' : value
+
+      return {
+        [`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
+          '--tw-divide-y-reverse': '0',
+          'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
+          'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
+        },
+      }
+    },
+  })
+
+  addUtilities({
+    '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
+      '--tw-divide-y-reverse': '1',
+    },
+    '.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
+      '--tw-divide-x-reverse': '1',
+    },
+  })
+}

jit/corePlugins/fill.js

@@ -0,0 +1,20 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let colorPalette = flattenColorPalette(theme.fill)
+
+  matchUtilities({
+    fill: (modifier, { theme }) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('fill', modifier)]: { fill: toColorValue(value) } }
+    },
+  })
+}

jit/corePlugins/flex.js

@@ -0,0 +1,16 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    flex: (modifier, { theme }) => {
+      let value = theme.flex[modifier]
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('flex', modifier)]: { flex: theme.flex[modifier] } }
+    },
+  })
+}

jit/corePlugins/flexDirection.js

@@ -0,0 +1,16 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.flex-row': {
+    'flex-direction': 'row',
+  },
+  '.flex-row-reverse': {
+    'flex-direction': 'row-reverse',
+  },
+  '.flex-col': {
+    'flex-direction': 'column',
+  },
+  '.flex-col-reverse': {
+    'flex-direction': 'column-reverse',
+  },
+})

jit/corePlugins/flexGrow.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'flex-grow': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.flexGrow)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('flex-grow', modifier)]: { 'flex-grow': value } }
+    },
+  })
+}

jit/corePlugins/flexShrink.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'flex-shrink': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.flexShrink)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('flex-shrink', modifier)]: { 'flex-shrink': value } }
+    },
+  })
+}

jit/corePlugins/flexWrap.js

@@ -0,0 +1,13 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.flex-wrap': {
+    'flex-wrap': 'wrap',
+  },
+  '.flex-wrap-reverse': {
+    'flex-wrap': 'wrap-reverse',
+  },
+  '.flex-nowrap': {
+    'flex-wrap': 'nowrap',
+  },
+})

jit/corePlugins/float.js

@@ -0,0 +1,7 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.float-right': { float: 'right' },
+  '.float-left': { float: 'left' },
+  '.float-none': { float: 'none' },
+})

jit/corePlugins/fontFamily.js

@@ -0,0 +1,19 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let transformValue = transformThemeValue('fontFamily')
+
+  matchUtilities({
+    font: (modifier, { theme }) => {
+      let transformValue = transformThemeValue('fontFamily')
+      let value = transformValue(theme.fontFamily[modifier])
+
+      if (modifier === '' || value === undefined) {
+        return []
+      }
+
+      return { [nameClass('font', modifier)]: { 'font-family': transformValue(value) } }
+    },
+  })
+}

jit/corePlugins/fontSize.js

@@ -0,0 +1,45 @@
+const { asLength, nameClass } = require('../pluginUtils')
+const { isPlainObject } = require('../lib/utils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    text: (modifier, { theme }) => {
+      let value = theme.fontSize[modifier]
+
+      if (value === undefined) {
+        value = asLength(modifier, {})
+
+        return value === undefined
+          ? []
+          : {
+              [nameClass('text', modifier)]: {
+                'font-size': value,
+              },
+            }
+      }
+
+      let [fontSize, options] = Array.isArray(value) ? value : [value]
+      let { lineHeight, letterSpacing } = isPlainObject(options)
+        ? options
+        : {
+            lineHeight: options,
+          }
+
+      return {
+        [nameClass('text', modifier)]: {
+          'font-size': fontSize,
+          ...(lineHeight === undefined
+            ? {}
+            : {
+                'line-height': lineHeight,
+              }),
+          ...(letterSpacing === undefined
+            ? {}
+            : {
+                'letter-spacing': letterSpacing,
+              }),
+        },
+      }
+    },
+  })
+}

jit/corePlugins/fontSmoothing.js

@@ -0,0 +1,12 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.antialiased': {
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+  },
+  '.subpixel-antialiased': {
+    '-webkit-font-smoothing': 'auto',
+    '-moz-osx-font-smoothing': 'auto',
+  },
+})

jit/corePlugins/fontStyle.js

@@ -0,0 +1,6 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.italic': { 'font-style': 'italic' },
+  '.not-italic': { 'font-style': 'normal' },
+})

jit/corePlugins/fontVariantNumeric.js

@@ -0,0 +1,39 @@
+let fontVariantBaseStyles = {
+  '.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': {
+    '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
+    '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
+    '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
+    '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
+    '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
+    'font-variant-numeric':
+      'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
+  },
+}
+
+module.exports = function ({ matchUtilities }) {
+  matchUtilities({
+    'normal-nums': fontVariantBaseStyles,
+    ordinal: fontVariantBaseStyles,
+    'slashed-zero': fontVariantBaseStyles,
+    'lining-nums': fontVariantBaseStyles,
+    'oldstyle-nums': fontVariantBaseStyles,
+    'proportional-nums': fontVariantBaseStyles,
+    'tabular-nums': fontVariantBaseStyles,
+    'diagonal-fractions': fontVariantBaseStyles,
+    'stacked-fractions': fontVariantBaseStyles,
+  })
+
+  matchUtilities({
+    'normal-nums': { '.normal-nums': { 'font-variant-numeric': 'normal' } },
+    ordinal: { '.ordinal': { '--tw-ordinal': 'ordinal' } },
+    'slashed-zero': { '.slashed-zero': { '--tw-slashed-zero': 'slashed-zero' } },
+    'lining-nums': { '.lining-nums': { '--tw-numeric-figure': 'lining-nums' } },
+    'oldstyle-nums': { '.oldstyle-nums': { '--tw-numeric-figure': 'oldstyle-nums' } },
+    'proportional-nums': { '.proportional-nums': { '--tw-numeric-spacing': 'proportional-nums' } },
+    'tabular-nums': { '.tabular-nums': { '--tw-numeric-spacing': 'tabular-nums' } },
+    'diagonal-fractions': {
+      '.diagonal-fractions': { '--tw-numeric-fraction': 'diagonal-fractions' },
+    },
+    'stacked-fractions': { '.stacked-fractions': { '--tw-numeric-fraction': 'stacked-fractions' } },
+  })
+}

jit/corePlugins/fontWeight.js

@@ -0,0 +1,15 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    font: (modifier, { theme }) => {
+      let value = theme.fontWeight[modifier]
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('font', modifier)]: { 'font-weight': value } }
+    },
+  })
+}

jit/corePlugins/gap.js

@@ -0,0 +1,35 @@
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    gap: (modifier, { theme }) => {
+      let value = asLength(modifier, theme['gap'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('gap', modifier)]: { gap: value } }
+    },
+  })
+  matchUtilities({
+    'gap-x': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['gap'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('gap-x', modifier)]: { 'column-gap': value } }
+    },
+    'gap-y': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['gap'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('gap-y', modifier)]: { 'row-gap': value } }
+    },
+  })
+}

jit/corePlugins/gradientColorStops.js

@@ -0,0 +1,75 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const toRgba = require('tailwindcss/lib/util/withAlphaVariable').toRgba
+const { asColor, nameClass } = require('../pluginUtils')
+
+function transparentTo(value) {
+  if (typeof value === 'function') {
+    return value({ opacityValue: 0 })
+  }
+
+  try {
+    const [r, g, b] = toRgba(value)
+    return `rgba(${r}, ${g}, ${b}, 0)`
+  } catch (_error) {
+    return `rgba(255, 255, 255, 0)`
+  }
+}
+
+module.exports = function ({ matchUtilities, theme }) {
+  let colorPalette = flattenColorPalette(theme('gradientColorStops'))
+
+  matchUtilities({
+    from: (modifier) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      let transparentToValue = transparentTo(value)
+
+      return {
+        [nameClass('from', modifier)]: {
+          '--tw-gradient-from': toColorValue(value, 'from'),
+          '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
+        },
+      }
+    },
+  })
+  matchUtilities({
+    via: (modifier) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      let transparentToValue = transparentTo(value)
+
+      return {
+        [nameClass('via', modifier)]: {
+          '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
+            value,
+            'via'
+          )}, var(--tw-gradient-to, ${transparentToValue})`,
+        },
+      }
+    },
+  })
+  matchUtilities({
+    to: (modifier) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('to', modifier)]: {
+          '--tw-gradient-to': toColorValue(value, 'to'),
+        },
+      }
+    },
+  })
+}

jit/corePlugins/gridAutoColumns.js

@@ -0,0 +1,15 @@
+const { asList, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'auto-cols': (modifier, { theme }) => {
+      let value = asList(modifier, theme.gridAutoColumns)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('auto-cols', modifier)]: { 'grid-auto-columns': value } }
+    },
+  })
+}

jit/corePlugins/gridAutoFlow.js

@@ -0,0 +1,8 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.grid-flow-row': { gridAutoFlow: 'row' },
+  '.grid-flow-col': { gridAutoFlow: 'column' },
+  '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
+  '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
+})

jit/corePlugins/gridAutoRows.js

@@ -0,0 +1,15 @@
+const { asList, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'auto-rows': (modifier, { theme }) => {
+      let value = asList(modifier, theme.gridAutoRows)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('auto-rows', modifier)]: { 'grid-auto-rows': value } }
+    },
+  })
+}

jit/corePlugins/gridColumn.js

@@ -0,0 +1,14 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    col: (modifier, { theme }) => {
+      if (modifier === '' || theme.gridColumn[modifier] === undefined) {
+        return []
+      }
+
+      return { [nameClass('col', modifier)]: { 'grid-column': theme.gridColumn[modifier] } }
+    },
+  })
+}

jit/corePlugins/gridColumnEnd.js

@@ -0,0 +1,17 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'col-end': (modifier, { theme }) => {
+      let transformValue = transformThemeValue('gridColumnEnd')
+      let value = transformValue(theme.gridColumnEnd[modifier])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('col-end', modifier)]: { 'grid-column-end': value } }
+    },
+  })
+}

jit/corePlugins/gridColumnStart.js

@@ -0,0 +1,17 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'col-start': (modifier, { theme }) => {
+      let transformValue = transformThemeValue('gridColumnStart')
+      let value = transformValue(theme.gridColumnStart[modifier])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('col-start', modifier)]: { 'grid-column-start': value } }
+    },
+  })
+}

jit/corePlugins/gridRow.js

@@ -0,0 +1,16 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    row: (modifier, { theme }) => {
+      let value = theme.gridRow[modifier]
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('row', modifier)]: { 'grid-row': value } }
+    },
+  })
+}

jit/corePlugins/gridRowEnd.js

@@ -0,0 +1,15 @@
+const { nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'row-end': (modifier, { theme }) => {
+      let value = theme.gridRowEnd[modifier]
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('row-end', modifier)]: { 'grid-row-end': value } }
+    },
+  })
+}

jit/corePlugins/gridRowStart.js

@@ -0,0 +1,15 @@
+const { nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'row-start': (modifier, { theme }) => {
+      let value = theme.gridRowStart[modifier]
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('row-start', modifier)]: { 'grid-row-start': value } }
+    },
+  })
+}

jit/corePlugins/gridTemplateColumns.js

@@ -0,0 +1,15 @@
+const { asList, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'grid-cols': (modifier, { theme }) => {
+      let value = asList(modifier, theme.gridTemplateColumns)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('grid-cols', modifier)]: { 'grid-template-columns': value } }
+    },
+  })
+}

jit/corePlugins/gridTemplateRows.js

@@ -0,0 +1,15 @@
+const { asList, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'grid-rows': (modifier, { theme }) => {
+      let value = asList(modifier, theme.gridTemplateRows)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('grid-rows', modifier)]: { 'grid-template-rows': value } }
+    },
+  })
+}

jit/corePlugins/height.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities }) {
+  matchUtilities({
+    h: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['height'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('h', modifier)]: { height: value } }
+    },
+  })
+}

jit/corePlugins/index.js

@@ -0,0 +1,295 @@
+const postcss = require('postcss')
+const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default
+const prefixSelector = require('tailwindcss/lib/util/prefixSelector').default
+const {
+  updateLastClasses,
+  updateAllClasses,
+  transformAllSelectors,
+  transformAllClasses,
+  transformLastClasses,
+} = require('../pluginUtils')
+
+module.exports = {
+  pseudoClassVariants: function ({ config, theme, addVariant }) {
+    let pseudoVariants = [
+      ['first', 'first-child'],
+      ['last', 'last-child'],
+      ['odd', 'nth-child(odd)'],
+      ['even', 'nth-child(even)'],
+      'visited',
+      'checked',
+      'focus-within',
+      'hover',
+      'focus',
+      'focus-visible',
+      'active',
+      'disabled',
+    ]
+
+    for (let variant of pseudoVariants) {
+      let [variantName, state] = Array.isArray(variant) ? variant : [variant, variant]
+
+      addVariant(
+        variantName,
+        transformAllClasses((className, { withPseudo }) => {
+          return withPseudo(`${variantName}${config('separator')}${className}`, state)
+        })
+      )
+    }
+
+    for (let variant of pseudoVariants) {
+      let [variantName, state] = Array.isArray(variant) ? variant : [variant, variant]
+      let groupVariantName = `group-${variantName}`
+
+      addVariant(
+        groupVariantName,
+        transformAllSelectors((selector) => {
+          let variantSelector = updateAllClasses(selector, (className) => {
+            return `${groupVariantName}${config('separator')}${className}`
+          })
+
+          if (variantSelector === selector) {
+            return null
+          }
+
+          let groupSelector = prefixSelector(
+            config('prefix'),
+            `.group${config('separator')}${state}`
+          )
+
+          return `${groupSelector} ${variantSelector}`
+        })
+      )
+    }
+  },
+  directionVariants: function ({ config, theme, addVariant }) {
+    addVariant(
+      'ltr',
+      transformAllSelectors(
+        (selector) =>
+          `[dir="ltr"] ${updateAllClasses(
+            selector,
+            (className) => `ltr${config('separator')}${className}`
+          )}`
+      )
+    )
+
+    addVariant(
+      'rtl',
+      transformAllSelectors(
+        (selector) =>
+          `[dir="rtl"] ${updateAllClasses(
+            selector,
+            (className) => `rtl${config('separator')}${className}`
+          )}`
+      )
+    )
+  },
+  reducedMotionVariants: function ({ config, theme, addVariant }) {
+    addVariant(
+      'motion-safe',
+      transformLastClasses(
+        (className) => {
+          return `motion-safe${config('separator')}${className}`
+        },
+        () => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: no-preference)' })
+      )
+    )
+
+    addVariant(
+      'motion-reduce',
+      transformLastClasses(
+        (className) => {
+          return `motion-reduce${config('separator')}${className}`
+        },
+        () => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
+      )
+    )
+  },
+  darkVariants: function ({ config, theme, addVariant }) {
+    if (config('darkMode') === 'class') {
+      addVariant(
+        'dark',
+        transformAllSelectors((selector) => {
+          let variantSelector = updateLastClasses(selector, (className) => {
+            return `dark${config('separator')}${className}`
+          })
+
+          if (variantSelector === selector) {
+            return null
+          }
+
+          let darkSelector = prefixSelector(config('prefix'), `.dark`)
+
+          return `${darkSelector} ${variantSelector}`
+        })
+      )
+    } else if (config('darkMode') === 'media') {
+      addVariant(
+        'dark',
+        transformLastClasses(
+          (className) => {
+            return `dark${config('separator')}${className}`
+          },
+          () => postcss.atRule({ name: 'media', params: '(prefers-color-scheme: dark)' })
+        )
+      )
+    }
+  },
+  screenVariants: function ({ config, theme, addVariant }) {
+    for (let screen in theme('screens')) {
+      let size = theme('screens')[screen]
+      let query = buildMediaQuery(size)
+
+      addVariant(
+        screen,
+        transformLastClasses(
+          (className) => {
+            return `${screen}${config('separator')}${className}`
+          },
+          () => postcss.atRule({ name: 'media', params: query })
+        )
+      )
+    }
+  },
+
+  // Base
+  preflight: require('./preflight'),
+
+  // Components
+  container: require('./container'),
+
+  // Utilitiles
+  accessibility: require('./accessibility'),
+  pointerEvents: require('./pointerEvents'),
+  visibility: require('./visibility'),
+  position: require('./position'),
+  inset: require('./inset'),
+  zIndex: require('./zIndex'),
+  order: require('./order'),
+  gridColumn: require('./gridColumn'),
+  gridColumnEnd: require('./gridColumnEnd'),
+  gridColumnStart: require('./gridColumnStart'),
+  gridRow: require('./gridRow'),
+  gridRowEnd: require('./gridRowEnd'),
+  gridRowStart: require('./gridRowStart'),
+  float: require('./float'),
+  clear: require('./clear'),
+  margin: require('./margin'),
+  boxSizing: require('./boxSizing'),
+  display: require('./display'),
+  height: require('./height'),
+  maxHeight: require('./maxHeight'),
+  minHeight: require('./minHeight'),
+  width: require('./width'),
+  minWidth: require('./minWidth'),
+  maxWidth: require('./maxWidth'),
+  flex: require('./flex'),
+  flexShrink: require('./flexShrink'),
+  flexGrow: require('./flexGrow'),
+  tableLayout: require('./tableLayout'),
+  borderCollapse: require('./borderCollapse'),
+
+  transform: require('./transform'),
+  transformOrigin: require('./transformOrigin'),
+  translate: require('./translate'),
+  rotate: require('./rotate'),
+  skew: require('./skew'),
+  scale: require('./scale'),
+
+  animation: require('./animation'),
+
+  cursor: require('./cursor'),
+  userSelect: require('./userSelect'),
+  resize: require('./resize'),
+
+  listStylePosition: require('./listStylePosition'),
+  listStyleType: require('./listStyleType'),
+
+  appearance: require('./appearance'),
+  gridAutoColumns: require('./gridAutoColumns'),
+  gridAutoFlow: require('./gridAutoFlow'),
+  gridAutoRows: require('./gridAutoRows'),
+  gridTemplateColumns: require('./gridTemplateColumns'),
+  gridTemplateRows: require('./gridTemplateRows'),
+  flexDirection: require('./flexDirection'),
+  flexWrap: require('./flexWrap'),
+  placeContent: require('./placeContent'),
+  placeItems: require('./placeItems'),
+  alignContent: require('./alignContent'),
+  alignItems: require('./alignItems'),
+  justifyContent: require('./justifyContent'),
+  justifyItems: require('./justifyItems'),
+  gap: require('./gap'),
+  space: require('./space'),
+  divideWidth: require('./divideWidth'),
+  divideStyle: require('./divideStyle'),
+  divideColor: require('./divideColor'),
+  divideOpacity: require('./divideOpacity'),
+
+  placeSelf: require('./placeSelf'),
+  alignSelf: require('./alignSelf'),
+  justifySelf: require('./justifySelf'),
+
+  overflow: require('./overflow'),
+  overscrollBehavior: require('./overscrollBehavior'),
+  textOverflow: require('./textOverflow'),
+  whitespace: require('./whitespace'),
+  wordBreak: require('./wordBreak'),
+
+  borderRadius: require('./borderRadius'),
+  borderWidth: require('./borderWidth'),
+  borderStyle: require('./borderStyle'),
+  borderColor: require('./borderColor'),
+  borderOpacity: require('./borderOpacity'),
+
+  backgroundColor: require('./backgroundColor'),
+  backgroundOpacity: require('./backgroundOpacity'),
+  backgroundImage: require('./backgroundImage'),
+  gradientColorStops: require('./gradientColorStops'),
+  backgroundSize: require('./backgroundSize'),
+  backgroundAttachment: require('./backgroundAttachment'),
+  backgroundClip: require('./backgroundClip'),
+  backgroundPosition: require('./backgroundPosition'),
+  backgroundRepeat: require('./backgroundRepeat'),
+
+  fill: require('./fill'),
+  stroke: require('./stroke'),
+  strokeWidth: require('./strokeWidth'),
+
+  objectFit: require('./objectFit'),
+  objectPosition: require('./objectPosition'),
+
+  padding: require('./padding'),
+
+  textAlign: require('./textAlign'),
+  verticalAlign: require('./verticalAlign'),
+  fontFamily: require('./fontFamily'),
+  fontSize: require('./fontSize'),
+  fontWeight: require('./fontWeight'),
+  textTransform: require('./textTransform'),
+  fontStyle: require('./fontStyle'),
+  fontVariantNumeric: require('./fontVariantNumeric'),
+  lineHeight: require('./lineHeight'),
+  letterSpacing: require('./letterSpacing'),
+  textColor: require('./textColor'),
+  textOpacity: require('./textOpacity'),
+  textDecoration: require('./textDecoration'),
+  fontSmoothing: require('./fontSmoothing'),
+  placeholderColor: require('./placeholderColor'),
+  placeholderOpacity: require('./placeholderOpacity'),
+
+  opacity: require('./opacity'),
+  boxShadow: require('./boxShadow'),
+  outline: require('./outline'),
+  ringWidth: require('./ringWidth'),
+  ringColor: require('./ringColor'),
+  ringOpacity: require('./ringOpacity'),
+  ringOffsetWidth: require('./ringOffsetWidth'),
+  ringOffsetColor: require('./ringOffsetColor'),
+
+  transitionProperty: require('./transitionProperty'),
+  transitionDelay: require('./transitionDelay'),
+  transitionDuration: require('./transitionDuration'),
+  transitionTimingFunction: require('./transitionTimingFunction'),
+}

jit/corePlugins/inset.js

@@ -0,0 +1,75 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities }) {
+  matchUtilities({
+    inset: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['inset'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('inset', modifier)]: { top: value, right: value, bottom: value, left: value },
+      }
+    },
+  })
+  matchUtilities({
+    'inset-x': (modifier, { theme }) => {
+      let value = asValue(modifier, theme['inset'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('inset-x', modifier)]: { left: value, right: value } }
+    },
+    'inset-y': (modifier, { theme }) => {
+      let value = asValue(modifier, theme['inset'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('inset-y', modifier)]: { top: value, bottom: value } }
+    },
+  })
+  matchUtilities({
+    top: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['inset'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('top', modifier)]: { top: value } }
+    },
+    right: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['inset'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('right', modifier)]: { right: value } }
+    },
+    bottom: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['inset'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('bottom', modifier)]: { bottom: value } }
+    },
+    left: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['inset'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('left', modifier)]: { left: value } }
+    },
+  })
+}

jit/corePlugins/justifyContent.js

@@ -0,0 +1,22 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.justify-start': {
+    'justify-content': 'flex-start',
+  },
+  '.justify-end': {
+    'justify-content': 'flex-end',
+  },
+  '.justify-center': {
+    'justify-content': 'center',
+  },
+  '.justify-between': {
+    'justify-content': 'space-between',
+  },
+  '.justify-around': {
+    'justify-content': 'space-around',
+  },
+  '.justify-evenly': {
+    'justify-content': 'space-evenly',
+  },
+})

jit/corePlugins/justifyItems.js

@@ -0,0 +1,19 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.justify-items-auto': {
+    'justify-items': 'auto',
+  },
+  '.justify-items-start': {
+    'justify-items': 'start',
+  },
+  '.justify-items-end': {
+    'justify-items': 'end',
+  },
+  '.justify-items-center': {
+    'justify-items': 'center',
+  },
+  '.justify-items-stretch': {
+    'justify-items': 'stretch',
+  },
+})

jit/corePlugins/justifySelf.js

@@ -0,0 +1,19 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.justify-self-auto': {
+    'justify-self': 'auto',
+  },
+  '.justify-self-start': {
+    'justify-self': 'start',
+  },
+  '.justify-self-end': {
+    'justify-self': 'end',
+  },
+  '.justify-self-center': {
+    'justify-self': 'center',
+  },
+  '.justify-self-stretch': {
+    'justify-self': 'stretch',
+  },
+})

jit/corePlugins/letterSpacing.js

@@ -0,0 +1,15 @@
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    tracking: (modifier, { theme }) => {
+      let value = asLength(modifier, theme['letterSpacing'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('tracking', modifier)]: { 'letter-spacing': value } }
+    },
+  })
+}

jit/corePlugins/lineHeight.js

@@ -0,0 +1,15 @@
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    leading: (modifier, { theme }) => {
+      let value = asLength(modifier, theme['lineHeight'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('leading', modifier)]: { 'line-height': value } }
+    },
+  })
+}

jit/corePlugins/listStylePosition.js

@@ -0,0 +1,6 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.list-inside': { 'list-style-position': 'inside' },
+  '.list-outside': { 'list-style-position': 'outside' },
+})

jit/corePlugins/listStyleType.js

@@ -0,0 +1,14 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    list: (modifier, { theme }) => {
+      if (modifier === '' || theme.listStyleType[modifier] === undefined) {
+        return []
+      }
+
+      return { [nameClass('list', modifier)]: { 'list-style-type': theme.listStyleType[modifier] } }
+    },
+  })
+}

jit/corePlugins/margin.js

@@ -0,0 +1,73 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities }) {
+  matchUtilities({
+    m: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('m', modifier)]: { margin: value } }
+    },
+  })
+  matchUtilities({
+    mx: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('mx', modifier)]: { 'margin-left': value, 'margin-right': value } }
+    },
+    my: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('my', modifier)]: { 'margin-top': value, 'margin-bottom': value } }
+    },
+  })
+  matchUtilities({
+    mt: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('mt', modifier)]: { 'margin-top': value } }
+    },
+    mr: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('mr', modifier)]: { 'margin-right': value } }
+    },
+    mb: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('mb', modifier)]: { 'margin-bottom': value } }
+    },
+    ml: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['margin'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('ml', modifier)]: { 'margin-left': value } }
+    },
+  })
+}

jit/corePlugins/maxHeight.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities }) {
+  matchUtilities({
+    'max-h': (modifier, { theme }) => {
+      let value = asValue(modifier, theme['maxHeight'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('max-h', modifier)]: { 'max-height': value } }
+    },
+  })
+}

jit/corePlugins/maxWidth.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities }) {
+  matchUtilities({
+    'max-w': (modifier, { theme }) => {
+      let value = asValue(modifier, theme['maxWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('max-w', modifier)]: { 'max-width': value } }
+    },
+  })
+}

jit/corePlugins/minHeight.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities }) {
+  matchUtilities({
+    'min-h': (modifier, { theme }) => {
+      let value = asValue(modifier, theme['minHeight'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('min-h', modifier)]: { 'min-height': value } }
+    },
+  })
+}

jit/corePlugins/minWidth.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities }) {
+  matchUtilities({
+    'min-w': (modifier, { theme }) => {
+      let value = asValue(modifier, theme['minWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('min-w', modifier)]: { 'min-width': value } }
+    },
+  })
+}

jit/corePlugins/objectFit.js

@@ -0,0 +1,9 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.object-contain': { 'object-fit': 'contain' },
+  '.object-cover': { 'object-fit': 'cover' },
+  '.object-fill': { 'object-fit': 'fill' },
+  '.object-none': { 'object-fit': 'none' },
+  '.object-scale-down': { 'object-fit': 'scale-down' },
+})

jit/corePlugins/objectPosition.js

@@ -0,0 +1,16 @@
+const { nameClass } = require('../pluginUtils')
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    object: (modifier, { theme }) => {
+      if (modifier === '' || theme.objectPosition[modifier] === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('object', modifier)]: { 'object-position': theme.objectPosition[modifier] },
+      }
+    },
+  })
+}

jit/corePlugins/opacity.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    opacity: (modifier, { theme }) => {
+      let value = asValue(modifier, theme.opacity)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('opacity', modifier)]: { opacity: value } }
+    },
+  })
+}

jit/corePlugins/order.js

@@ -0,0 +1,15 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    order: (modifier, { theme }) => {
+      let value = asValue(modifier, theme.order)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('order', modifier)]: { order: value } }
+    },
+  })
+}

jit/corePlugins/outline.js

@@ -0,0 +1,22 @@
+const { nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    outline: (modifier, { theme }) => {
+      let value = theme.outline[modifier]
+
+      if (value === undefined) {
+        return []
+      }
+
+      let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
+
+      return {
+        [nameClass('outline', modifier)]: {
+          outline,
+          'outline-offset': outlineOffset,
+        },
+      }
+    },
+  })
+}

jit/corePlugins/overflow.js

@@ -0,0 +1,16 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.overflow-auto': { overflow: 'auto' },
+  '.overflow-hidden': { overflow: 'hidden' },
+  '.overflow-visible': { overflow: 'visible' },
+  '.overflow-scroll': { overflow: 'scroll' },
+  '.overflow-x-auto': { 'overflow-x': 'auto' },
+  '.overflow-y-auto': { 'overflow-y': 'auto' },
+  '.overflow-x-hidden': { 'overflow-x': 'hidden' },
+  '.overflow-y-hidden': { 'overflow-y': 'hidden' },
+  '.overflow-x-visible': { 'overflow-x': 'visible' },
+  '.overflow-y-visible': { 'overflow-y': 'visible' },
+  '.overflow-x-scroll': { 'overflow-x': 'scroll' },
+  '.overflow-y-scroll': { 'overflow-y': 'scroll' },
+})

jit/corePlugins/overscrollBehavior.js

@@ -0,0 +1,13 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.overscroll-auto': { 'overscroll-behavior': 'auto' },
+  '.overscroll-contain': { 'overscroll-behavior': 'contain' },
+  '.overscroll-none': { 'overscroll-behavior': 'none' },
+  '.overscroll-y-auto': { 'overscroll-behavior-y': 'auto' },
+  '.overscroll-y-contain': { 'overscroll-behavior-y': 'contain' },
+  '.overscroll-y-none': { 'overscroll-behavior-y': 'none' },
+  '.overscroll-x-auto': { 'overscroll-behavior-x': 'auto' },
+  '.overscroll-x-contain': { 'overscroll-behavior-x': 'contain' },
+  '.overscroll-x-none': { 'overscroll-behavior-x': 'none' },
+})

jit/corePlugins/padding.js

@@ -0,0 +1,73 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    p: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['padding'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('p', modifier)]: { padding: value } }
+    },
+  })
+  matchUtilities({
+    px: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['padding'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('px', modifier)]: { 'padding-left': value, 'padding-right': value } }
+    },
+    py: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['padding'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('py', modifier)]: { 'padding-top': value, 'padding-bottom': value } }
+    },
+  })
+  matchUtilities({
+    pt: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['padding'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('pt', modifier)]: { 'padding-top': value } }
+    },
+    pr: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['padding'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('pr', modifier)]: { 'padding-right': value } }
+    },
+    pb: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['padding'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('pb', modifier)]: { 'padding-bottom': value } }
+    },
+    pl: (modifier, { theme }) => {
+      let value = asValue(modifier, theme['padding'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('pl', modifier)]: { 'padding-left': value } }
+    },
+  })
+}

jit/corePlugins/placeContent.js

@@ -0,0 +1,25 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.place-content-center': {
+    'place-content': 'center',
+  },
+  '.place-content-start': {
+    'place-content': 'start',
+  },
+  '.place-content-end': {
+    'place-content': 'end',
+  },
+  '.place-content-between': {
+    'place-content': 'space-between',
+  },
+  '.place-content-around': {
+    'place-content': 'space-around',
+  },
+  '.place-content-evenly': {
+    'place-content': 'space-evenly',
+  },
+  '.place-content-stretch': {
+    'place-content': 'stretch',
+  },
+})

jit/corePlugins/placeItems.js

@@ -0,0 +1,19 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.place-items-auto': {
+    'place-items': 'auto',
+  },
+  '.place-items-start': {
+    'place-items': 'start',
+  },
+  '.place-items-end': {
+    'place-items': 'end',
+  },
+  '.place-items-center': {
+    'place-items': 'center',
+  },
+  '.place-items-stretch': {
+    'place-items': 'stretch',
+  },
+})

jit/corePlugins/placeSelf.js

@@ -0,0 +1,19 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.place-self-auto': {
+    'place-self': 'auto',
+  },
+  '.place-self-start': {
+    'place-self': 'start',
+  },
+  '.place-self-end': {
+    'place-self': 'end',
+  },
+  '.place-self-center': {
+    'place-self': 'center',
+  },
+  '.place-self-stretch': {
+    'place-self': 'stretch',
+  },
+})

jit/corePlugins/placeholderColor.js

@@ -0,0 +1,26 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let colorPalette = flattenColorPalette(theme.placeholderColor)
+
+  matchUtilities({
+    placeholder: (modifier, { theme }) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [`${nameClass('placeholder', modifier)}::placeholder`]: withAlphaVariable({
+          color: value,
+          property: 'color',
+          variable: '--tw-placeholder-opacity',
+        }),
+      }
+    },
+  })
+}

jit/corePlugins/placeholderOpacity.js

@@ -0,0 +1,19 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'placeholder-opacity': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.placeholderOpacity)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [`${nameClass('placeholder-opacity', modifier)}::placeholder`]: {
+          '--tw-placeholder-opacity': value,
+        },
+      }
+    },
+  })
+}

jit/corePlugins/pointerEvents.js

@@ -0,0 +1,6 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.pointer-events-none': { 'pointer-events': 'none' },
+  '.pointer-events-auto': { 'pointer-events': 'auto' },
+})

jit/corePlugins/position.js

@@ -0,0 +1,11 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.static': { position: 'static' },
+  '.fixed': { position: 'fixed' },
+  '.absolute': { position: 'absolute' },
+  '.relative': { position: 'relative' },
+  '.sticky': {
+    position: 'sticky',
+  },
+})

jit/corePlugins/preflight.js

@@ -0,0 +1,3 @@
+const preflight = require('tailwindcss/lib/plugins/preflight').default
+
+module.exports = preflight()

jit/corePlugins/resize.js

@@ -0,0 +1,8 @@
+const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
+
+module.exports = createSimpleStaticUtilityPlugin({
+  '.resize-none': { resize: 'none' },
+  '.resize-y': { resize: 'vertical' },
+  '.resize-x': { resize: 'horizontal' },
+  '.resize': { resize: 'both' },
+})

jit/corePlugins/ringColor.js

@@ -0,0 +1,30 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let colorPalette = flattenColorPalette(theme.ringColor)
+
+  matchUtilities({
+    ring: (modifier, { theme }) => {
+      if (modifier === 'DEFAULT') {
+        return []
+      }
+
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('ring', modifier)]: withAlphaVariable({
+          color: value,
+          property: '--tw-ring-color',
+          variable: '--tw-ring-opacity',
+        }),
+      }
+    },
+  })
+}

jit/corePlugins/ringOffsetColor.js

@@ -0,0 +1,24 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let colorPalette = flattenColorPalette(theme.ringOffsetColor)
+
+  matchUtilities({
+    'ring-offset': (modifier, { theme }) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('ring-offset', modifier)]: {
+          '--tw-ring-offset-color': toColorValue(value),
+        },
+      }
+    },
+  })
+}

jit/corePlugins/ringOffsetWidth.js

@@ -0,0 +1,19 @@
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'ring-offset': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['ringOffsetWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('ring-offset', modifier)]: {
+          '--tw-ring-offset-width': value,
+        },
+      }
+    },
+  })
+}

jit/corePlugins/ringOpacity.js

@@ -0,0 +1,19 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'ring-opacity': (modifier, { theme }) => {
+      let value = asValue(modifier, theme['ringOpacity'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [nameClass('ring-opacity', modifier)]: {
+          '--tw-ring-opacity': value,
+        },
+      }
+    },
+  })
+}

jit/corePlugins/ringWidth.js

@@ -0,0 +1,60 @@
+const dlv = require('dlv')
+const toRgba = require('tailwindcss/lib/util/withAlphaVariable').toRgba
+const { asLength, nameClass } = require('../pluginUtils')
+
+function safeCall(callback, defaultValue) {
+  try {
+    return callback()
+  } catch (_error) {
+    return defaultValue
+  }
+}
+
+module.exports = function ({ addBase, matchUtilities, addUtilities, jit: { theme } }) {
+  let ringColorDefault = (([r, g, b]) => {
+    return `rgba(${r}, ${g}, ${b}, ${dlv(theme, ['ringOpacity', 'DEFAULT'], '0.5')})`
+  })(safeCall(() => toRgba(dlv(theme, ['ringColor', 'DEFAULT'])), ['147', '197', '253']))
+
+  let ringReset = {
+    '*': {
+      '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-ring-offset-width': dlv(theme, ['ringOffsetWidth', 'DEFAULT'], '0px'),
+      '--tw-ring-offset-color': dlv(theme, ['ringOffsetColor', 'DEFAULT'], '#fff'),
+      '--tw-ring-color': ringColorDefault,
+      '--tw-ring-offset-shadow': '0 0 #0000',
+      '--tw-ring-shadow': '0 0 #0000',
+    },
+  }
+
+  addBase(ringReset)
+
+  matchUtilities({
+    ring: (modifier, { theme }) => {
+      let value = asLength(modifier, theme['ringWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return [
+        {
+          [nameClass('ring', modifier)]: {
+            '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
+            '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
+            'box-shadow': [
+              `var(--tw-ring-offset-shadow)`,
+              `var(--tw-ring-shadow)`,
+              `var(--tw-shadow, 0 0 #0000)`,
+            ].join(', '),
+          },
+        },
+      ]
+    },
+  })
+
+  addUtilities({
+    '.ring-inset': {
+      '--tw-ring-inset': 'inset',
+    },
+  })
+}

jit/corePlugins/rotate.js

@@ -0,0 +1,15 @@
+const { asAngle, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    rotate: (modifier, { theme }) => {
+      let value = asAngle(modifier, theme.rotate)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('rotate', modifier)]: { '--tw-rotate': value } }
+    },
+  })
+}

jit/corePlugins/scale.js

@@ -0,0 +1,35 @@
+const { asValue, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    scale: (modifier, { theme }) => {
+      let value = asValue(modifier, theme.scale)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('scale', modifier)]: { '--tw-scale-x': value, '--tw-scale-y': value } }
+    },
+  })
+  matchUtilities({
+    'scale-x': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.scale)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('scale-x', modifier)]: { '--tw-scale-x': value } }
+    },
+    'scale-y': (modifier, { theme }) => {
+      let value = asValue(modifier, theme.scale)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('scale-y', modifier)]: { '--tw-scale-y': value } }
+    },
+  })
+}

jit/corePlugins/skew.js

@@ -0,0 +1,24 @@
+const { asAngle, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    'skew-x': (modifier, { theme }) => {
+      let value = asAngle(modifier, theme.skew)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('skew-x', modifier)]: { '--tw-skew-x': value } }
+    },
+    'skew-y': (modifier, { theme }) => {
+      let value = asAngle(modifier, theme.skew)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('skew-y', modifier)]: { '--tw-skew-y': value } }
+    },
+  })
+}

jit/corePlugins/space.js

@@ -0,0 +1,46 @@
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) {
+  matchUtilities({
+    'space-x': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['space'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [`${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
+          '--tw-space-x-reverse': '0',
+          'margin-right': `calc(${value} * var(--tw-space-x-reverse))`,
+          'margin-left': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
+        },
+      }
+    },
+    'space-y': (modifier, { theme }) => {
+      let value = asLength(modifier, theme['space'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return {
+        [`${nameClass('space-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
+          '--tw-space-y-reverse': '0',
+          'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
+          'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`,
+        },
+      }
+    },
+  })
+
+  addUtilities({
+    '.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
+      '--tw-space-y-reverse': '1',
+    },
+    '.space-x-reverse > :not([hidden]) ~ :not([hidden])': {
+      '--tw-space-x-reverse': '1',
+    },
+  })
+}

jit/corePlugins/stroke.js

@@ -0,0 +1,20 @@
+const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
+const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  let colorPalette = flattenColorPalette(theme.stroke)
+
+  matchUtilities({
+    stroke: (modifier, { theme }) => {
+      let value = asColor(modifier, colorPalette)
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('stroke', modifier)]: { stroke: toColorValue(value) } }
+    },
+  })
+}

jit/corePlugins/strokeWidth.js

@@ -0,0 +1,16 @@
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength, nameClass } = require('../pluginUtils')
+
+module.exports = function ({ matchUtilities, jit: { theme } }) {
+  matchUtilities({
+    stroke: (modifier, { theme }) => {
+      let value = asLength(modifier, theme['strokeWidth'])
+
+      if (value === undefined) {
+        return []
+      }
+
+      return { [nameClass('stroke', modifier)]: { 'stroke-width': value } }
+    },
+  })
+}