Why some Tailwind classes are working and others aren't?

1.7k Views Asked by Janae Welsh At 07 July 2022 at 18:14

I haven't found a solution that works. I followed the steps on the Tailwind installation page. I've linked everything. I know that Tailwind is being applied to the index.html since the font is different and I'm able to style the background color of the header. But that's all that has worked so far. If I try to add any additional classes (ex. flex, font-weight), to the header or anything else, there's no change.

My HTML head and header:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./assets/css/dist/output.css" rel="stylesheet">
    <link href="./assets/css/src/input.css" rel="stylesheet">
    <title>Room-3</title>
</head>
<body>
    <!-- Class "flex" isnt working -->
    <header class=" flex bg-slate-400">
        <h1>Room-3</h1>
        <p id="what-we-do">What We Do</p>
        <button>Get Started</button>
    </header>
    <script src="./tailwind.config.js"></script>
</body>

My tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./"],
  theme: {
    extend: {},
  },
  plugins: [],
}

My input.css:

Note: @tailwind is red and underlined in each instance, so I suspect the problem has something to do with this file

@tailwind base;
@tailwind components;
@tailwind utilities;

Original Q&A

There are 4 best solutions below

krishnaacharyaa On 08 July 2022 at 03:44

It is supposed to work fine.If the background is working then the rest should work as well

There may be mistakes in the class names.

Try this code:

<header class="flex items-center justify-around bg-slate-400">
  <h1 class="">Room-3</h1>
  <p id="what-we-do">What We Do</p>
  <button class="text-2xl">Get Started</button>
</header>

The output goes like:

MagnusEffect On 08 July 2022 at 07:42

As far as all the classes you mentioned i.e. flex, bg-slate-400 all are working. This means that tailwind css is installed properly on your system.

To watch flex is working, you can add flex-col or justify-evenly to give flex a direction.

However if you add font-weight , this will not work as it is not any class, you can add font-bold, font-medium,.. will work.

A working example is given below

<script src="https://cdn.tailwindcss.com"></script>
    <header class="flex justify-evenly bg-slate-300">
        <h1 class="font-extrabold">Room-3</h1>
        <p id="what-we-do">What We Do</p>
        <button class="font-extralight">Get Started</button>
    </header>

TopAngler On 13 April 2023 at 22:17

I had similar issue. I was working on a Laravel app in my local development environment using phpStorm, and the changes I was making to classes were not rendering in my browser. Tailwind will only load classes that are used within the code, BUT unless you are running npm, Tailwind will not recognize what you are typing into your IDE...

npm run dev

Aditya Upadhyay On 13 June 2023 at 02:39

Apply path in tailwind config file.

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content:{
    relative: true, 
    files: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./layout/**/*.{js,ts,jsx,tsx,mdx}", ==> I am using outside component So when i add path it working.
 
  ],},
  theme: {
    extend: {},
  },
  plugins: [],
}

In the documentation of tailwind it is written also Don’t use extremely broad patterns.

see what avoid

check docs

Why some Tailwind classes are working and others aren't?

There are 4 best solutions below

Related Questions in CSS

Related Questions in FRAMEWORKS

Related Questions in TAILWIND-CSS

Related Questions in CSS-FRAMEWORKS

Related Questions in TAILWIND-IN-JS

Trending Questions

Popular # Hahtags

Popular Questions