CODEWITHSUNDEEP
cssreactjstailwind-css
The Sirion
The Sirion

Reputation: 152

Tailwind doesn't apply some font size classes

So I started using Tailwind 2.0 in my React project and most things seem to work fine. Colors, sizing, flexbox, grid, etc. No problem with these utilities so far. But for some reason some font-size classes won't work properly. For instance, if I use text-lg, the style is applied as you can see here.

But if I try anything bigger than that, like text-2x1 or higher, the class isn't applied.

I searched around a lot but didn't find anything that could help me.

I don't know it this helps, but that's my config file (even though it was already happening even before I made any change to it):

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        normal: "#A8A878",
        poison: "#A040A0",
        psychic: "#F85888",
        grass: "#78C850",
        ground: "#E0C068",
        ice: "#98D8D8",
        fire: "#F08030",
        rock: "#B8A038",
        dragon: "#7038F8",
        water: "#6890F0",
        bug: "#A8B820",
        dark: "#705848",
        fighting: "#C03028",
        ghost: "#705898",
        steel: "#B8B8D0",
        flying: "#A890F0",
        electric: "#F8D030",
        fairy: "#EE99AC",
        noType: "lightgray",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

index.css has nothing but the bare minimum for Tailwind to work:

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

Here's the repository: https://github.com/TheSirion/pokedex

Upvotes: 4

Views: 16420

Answers (1)

Yash Sangai
Yash Sangai

Reputation: 372

Looks like you are using the wrong className, text-2x1 className is wrong instead you should use text-2xl.

For your reference, check the official Doc to see more classNames for font-size.

Upvotes: 6

Related Questions