CODEWITHSUNDEEP
tailwind-css
Daniel Harper
Daniel Harper

Reputation: 506

Tailwind css negative translate

The following code generates the translates but not negative ones so the following doesn't work -translate-x-1/7 but testing translate-x-1/7 it does.

I'm using the negative translate to slide a nav bar off the side of the page.

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      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%',
       },
    },
  },
  variants: {
    extend: {
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Upvotes: 3

Views: 7359

Answers (1)

Danila
Danila

Reputation: 18566

I've just tested it and it works fine: https://play.tailwindcss.com/Duhp6l1ejl

What version of Tailwind are you using? I see you are still using purge so probably not the latest. Maybe it was a bug in Tailwind and you just need to update?

Upvotes: 4

Related Questions