Tailwind not generating classes for translate extensions

[technikhil314]

I have following in my tailwind.config.js

I am using tailwind@2.1.1.

module.exports = {
  darkMode: "class", // or 'media' or 'class'
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      gridAutoRows: {
        "350px": "350px",
      },
      zIndex: {
        "-1": -1,
      },
      translate: {
        '1/7': '14.2857143%',
        '2/7': '28.5714286%',
        '3/7': '42.8571429%',
        '4/7': '57.1428571%',
        '5/7': '71.4285714%',
        '6/7': '85.7142857%',
        '120': '120%'
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

The problem is its not generating translate classes for 120 variant. Can anyone point out what is wrong here?

[simonswiss]

Hey!

I have copy/pasted your shared config file in a Tailwind Play, and the classes are generated out of the box.

I had some fun doing a little demo to show you the translate utilities in action:

transforms.mov

Here's the link to the Play:

https://play.tailwindcss.com/2sbojMyZIl?file=config

Hope it helps! 👍

[technikhil314]

Yeah sorry I forgot to come here to update. I just stopped my next server and restarte it then it worked. Not sure what was the issue. I would like to debug it though. Can you give me some pointers so find the root cause of it? Not sure if any one else has faced it. but if I find the root cause may be it will save someones time. @simonswiss

[simonswiss]

Hmmm can't think of anything off the top of my head, unless you did some changes in the _app.js component (which requires a server restart in NextJS I think).

Were the classes not generated for sure, or perhaps just not showing up in the Intellisense vscode extension?

[technikhil314]

No I did add them in jsx regardless of intellisense showing it or not. Regarding changes in _app.js I dont remember if I had any changes in app.js at that point of time. But I will try to reproduce the issue again over weekend. else we can consider it not a issue.