Tailwind 2

[microliving]

trafficstars

Hi here, Any chance to upgrade to Tailwind 2 by any chance?

[kayue]

@microliving This works in Tailwind 2

[Circuit8]

Also struggling with this. Given the config below I'm expecting user:background-green-100 and driver:background-green-100 to be generated css classes but not having any luck. Using tailwind 2.0.1 and twilwindcss-multi-theme 1.0.4. Thanks in advance.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    options: {
      safelist: ['type'],
    },
    preserveHtmlElements: true,
    content: [
      './app/views/**/*.erb',
      './app/components/**/*.erb',
      './app/components/**/*.rb',
      './app/helpers/*.rb',
      './app/javascript/controllers/**/*.js',
    ],
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
    themeVariants: ['user', 'driver'],
  },
  variants: {
    extend: {
      textColor: ['user', 'driver'],
      backgroundColor: ['user', 'driver'],
    },
  },
  plugins: [require('@tailwindcss/forms'), require('tailwindcss-multi-theme')],
}

[kayue]

@Circuit8 Seems correct. Have you tried disable the purge?

[simmerz]

@kayue went too early! purge disabled and it works! Now how to enable the purge to keep the built size small? Do we add the variants to the safelist?

[kayue]

@simmerz Glad to hear that. Purge options actually works for me, but I have a simpler setup. You might want to play with the purge settings.

    purge: {
        enabled: false,
        content: [
            './assets/**/*',
            './templates/**/*',
            './themes/**/*',
            './.storybook/preview.js',
            './stories/**/*',
        ],
    },

[codemem]

It's also not working for me with tailwind2.0.2

purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './styles/**/*.{css}'],
  theme: {
    themeVariants: ['dark', 'founder'],
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'founder', 'focus', 'dark', 'dark:hover', 'dark:focus'],
    textColor: ['responsive', 'hover', 'focus', 'founder', 'dark', 'dark:hover', 'dark:focus'],
  },
  plugins: [require('tailwindcss-multi-theme')],

any luck for tailwind2

[codemem]

@simmerz Glad to hear that. Purge options actually works for me, but I have a simpler setup. You might want to play with the purge settings.

    purge: {
        enabled: false,
        content: [
            './assets/**/*',
            './templates/**/*',
            './themes/**/*',
            './.storybook/preview.js',
            './stories/**/*',
        ],
    },

it's working fine with purge: false => but it's not working with production build

[kcsf]

Doesn't work with tailwind2x. Nor can I update from 1.03 to 1.04:

npm ERR! Could not resolve dependency: npm ERR! peer tailwindcss@"^1.4.6" from [email protected] npm ERR! node_modules/tailwindcss-multi-theme npm ERR! tailwindcss-multi-theme@"*" from the root project

the package.json lists "tailwindcss": "1.4.6" as a dependency. and that is removed per the Tailwind 2.x upgrade instructions.

[dariorinaldi]

The problem is the version in the peerDependecies, which is not compatible with the v2. So if you're using the v2 in the host project, the new Arborist from NPM7 shots those errors.

[tiznull]

I believe this package is abandoned and should be marked as such. No updates for two years, tailwind dependencies are very outdated. Projects that are using this package cannot update anymore. It would be great if the person that developed this package offered an alternative.