ecklf / tailwindcss-radix

Utilities and variants for styling Radix state
https://tailwindcss-radix.vercel.app
MIT License
2.09k stars 67 forks source link

Missing Toast State and Animate Classes? #24

Closed 58bits closed 1 year ago

58bits commented 1 year ago

Hi @ecklf - thanks for the excellent project.

So far all works as demo'd, however, we've hit a speedbump with the @radix-ui/react-toast component.

We have tailwind configured in a Remix.run project via postCSS (we are importing other CSS files)

For example... our postcsss.config.js looks like this...

// postcss.config.js
module.exports = cfg => {

  const
    dev = cfg.env === 'development',
    scss = cfg.file.extname === '.scss'

  return {
    map: dev ? { inline: false } : false,
    parser:  scss ? 'postcss-scss' : false,

    plugins: {
      'postcss-import': {},
      'postcss-nested': {},
      tailwindcss: {},
      autoprefixer: {},
      ...(dev ? {} : { cssnano: {} }),
    },
  }
}

And our tailwind.config.js config looks like this...

/** @type {import('tailwindcss').Config} */

const defaultTheme = require("tailwindcss/defaultTheme")

module.exports = {
  darkMode: 'class',
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require("tailwindcss-radix")(),
  ],
  theme: {
    ...defaultTheme,
    },
    extend: {},
  },
}

And in our app.css file, we import the tailwind base components and utilities files as:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

However, after all of this, and despite including the require("tailwindcss-radix")(), in our tailwind.config.js file, we appear to be missing the radix variant state and animation classes - such as radix-state-open:animate-toast-slide-in-right. They're present as class attributes of the components/elements, but in devtools, we can see that no corresponding class definition is found.

Are we missing an import? Or configuration setting? Remix.run is using ESBuild - not sure if this is a factor?

Thoughts or suggestions greatly appreciated.

58bits commented 1 year ago

Found them in your tailwindcss-radix/demo/tailwind.config.js file ;-)