Why Tailwind CSS doesn't works with public/*.html files in my Ruby on Rails project

Question

I'm using Tailwind CSS for my Ruby on Rails project, the CSS works fine with all the layouts in views but it doesn't works with public/*.html files in my project. I have a 404.html page and a 500.html page in public directory where i need Tailwind CSS to work.

This is my tailwind.config.js file, I even added ./public/**/*.html but it still doesn't works:

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js',
    './node_modules/flowbite/**/*.js',
    './public/**/*.html'
  ],
  safelist: [
    'w-64',
    'w-1/2',
    'rounded-l-lg',
    'rounded-r-lg',
    'bg-gray-200',
    'grid-cols-4',
    'grid-cols-7',
    'h-6',
    'leading-6',
    'h-9',
    'leading-9',
    'shadow-lg',
    'bg-opacity-50',
    'dark:bg-opacity-80'
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        nagano: {
          white: '#FFFFFF',
          black: '#000000',
          'light-grey': '#E0E0DB',
          'dark-grey': '#2A2829',
          'light-red': '#B82126',
          'dark-red': '#8F1417',
          'backdrop': '#efefef',
          red: {
            10: "#FADBDC",
            100: "#8F1417"
          }
        },
        primary: {
          50: "#FCEDED",
          100: "#FADCDC",
          200: "#F7C9CA",
          300: "#F2A6A7",
          400: "#EB7072",
          500: "#E64C4F",
          600: "#D61F22",
          700: "#B3191C",
          800: "#8F1417",
          900: "#6B0F11"
        }
      },
      fontFamily: {
        'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
        'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
        'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
      },
      transitionProperty: {
        'width': 'width'
      },
      textDecoration: ['active'],
      minWidth: {
        'kanban': '28rem'
      },
    },
  },
  plugins: [
    require('flowbite/plugin')({
      charts: true,
    }),
  ],
}