Tailwind CSS not having any effect

by

I started a project using vite and then followed this documentation on the Tailwind CSS website.

I am trying to render a simple header with a few basic styles applied

export default function App() {
  return (
    <h1 className="text-10xl font-bold underline">
      Hello world! 
    </h1>
  )
}

The Tailwind CSS styles are not being applied. I believe it is an error with my tailwind.config.js file but I am not sure. Here is what that file looks like:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  • 1

    Please do your best to provide a minimum reproducible example

    – 

  • I believe that should be better and better explain my issue.

    – 

  • Is the file you created covered by one of these globs? “./index.html”, “./src/**/*.{js,ts,jsx,tsx}”,

    – 

  • Yes its a .jsx file

    – 

  • your tailwind.config file looks fine, you should add more details: what does your folder structure look like, package.json, do you have the postcss.config file, have you added the tailwind directives to your css file, etc

    – 

Leave a Comment