"ml" not producing css

[alicerocheman]

What version of Tailwind CSS are you using?

2.1.4

What build tool (or framework if it abstracts the build tool) are you using?

next 10.2.3

What version of Node.js are you using?

v14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

none

Describe your issue

I put "ml-2" on a span, but competed css shows no margin rules:

Whereas when I put "mx-2" (or "mr-2"), computed css shows margin rules:

I'm sorry I didn't manage to reproduce on an anonimized repo, but here's my tailwind config:

/** @typedef { import('tailwindcss/defaultConfig')} DefaultConfig */
/** @typedef { import('tailwindcss/defaultTheme')} DefaultTheme */
/** @typedef { DefaultConfig & {theme:{extend:DefaultTheme}}} TailwindConfig */
const defaultTheme = require('tailwindcss/defaultTheme');
const safePaddingPlugin = require('./styles/safe-padding-plugin');

const sizes = {
  15: '3.75rem',
  17: '4.25rem',
  18: '4.5rem',
  68: '17rem',
  75: '18.75rem',
  79: '19.75rem',
  86: '21.5rem',
  100: '25rem',
  112: '28rem',
  128: '32rem',
  144: '36rem',
  160: '40rem',
  192: '48rem',
};

/** @type {TailwindConfig} */
module.exports = {
  mode: 'jit',
  presets: [require('tailwindcss/defaultConfig')],
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './lib/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      xs: '520px',
      ...defaultTheme.screens,
    },
    extend: {
      colors: {
        primary: '#1AAE94',
        'review-yellow': '#FFAA00',
        'private-blue': '#184D7B',
        gray: {
          50: '#F5F5F5',
          100: '#EEEEEE',
          200: '#DDDDDD',
          230: '#D8D8D8',
          300: '#CCCCCC',
          400: '#999999',
          500: '#666666',
          700: '#333333',
        },
      },
      flexGrow: {
        2: 2,
      },
      fontFamily: {
        sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
      },
      fontSize: {
        xxs: ['.65rem', { lineHeight: '0.75rem' }],
      },
      height: sizes,
      maxHeight: sizes,
      outline: {
        primary: '2px solid #1AAE94',
      },
    },
  },
  plugins: [safePaddingPlugin()],
};

[alicerocheman]

Re launching build with ml-2 preset worked, so this is probably one of the issues with JIt and hot reload.

(I also encountered the same problem with shadow-something. only "shadow" alone worked.)

[drethedevjs]

I'm having the same problem. ml and mt (and maybe the others) aren't working on my React Vite app. I'm using Tailwind 3.3.2. mx works and container adds margin-left and -right auto. Furthermore, I'm converting from Create React app (CRA) to Vite. ml and mt work in CRA and it appears that the setup in the same minus the TS I'm adding to Vite.

Any ideas?