You can create a public repository here on GitHub.

You can find it here: https://github.com/eugenevk/tailwindvue

@eugenevk Maybe you didn't configure properly content section of tailwind config file. If tailwind doesn't know that some of your code uses text-3xl it will not create the neccessary css styles for it.

This issue still happens with 3.0.7.

Found out that if we use any other means of specifying the tw css classes, besides declaring them as strings (className="text-2xl"), using string interpolation, for example, will have TW preprocessor skip generating that class.

Solution: under purge add a safelist in tailwind.config:

  purge: {
    content: [
      '...',
    ],
    options: {
      safelist: {
        standard: [
        'text-2xl',
        'text-3xl',
        'text-4xl',
        'text-5xl',
        'text-6xl',
        'sm:text-2xl',
        'sm:text-3xl',
        'sm:text-4xl',
        'sm:text-5xl',
        'sm:text-6xl',
        'md:text-2xl',
        'md:text-3xl',
        'md:text-4xl',
        'md:text-5xl',
        'md:text-6xl',
        'lg:text-2xl',
        'lg:text-3xl',
        'lg:text-4xl',
        'lg:text-5xl',
        'lg:text-6xl',
        ],
      },
    },

Under theme I have listed all font sizes extra. It could be redundant, but I have no cleaned the code up yet. This is React 17.

  theme: {
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
     },
     //...
  }

Thanks this worked for me, here is more context: https://tailwindcss.com/docs/content-configuration#safelisting-classes

One example of where this can be useful is if your site displays user-generated content and you want users to be able to use a constrained set of Tailwind classes in their content that might not exist in your own site’s source files.

Thanks, this works for me.

This worked for me too. But I don't understand why.

Doesn't "./src/**/*.{html,js}" include './src/components/**/*.jsx'?

No. ./src/**/*.{html,js} expands to any .html or .js file in the src directory. If you wanted to include .jsx files in that single glob, you could add an additional entry to the brace expansion:

-./src/**/*.{html,js}
+./src/**/*.{html,js,jsx}

This worked for me. I was using tailwind in a layout folder, which wasn't specified in the tailwind.config.js file

Confirm that the file you're using tailwind in is under the content property of your tailwind.config.js file

Also, be sure that you are not overriding the values by customizing the default theme by mistake in tailwind.config.js under the fontSize key.