Request to make this happen Also is there a way to do this without d

If you really want that feature, tw-colors exposes the <code class="n

Variants without explicit theme declarations about tw-colors HOT 6 CLOSED

l-blondy commented on June 14, 2024

Variants without explicit theme declarations

from tw-colors.

Comments (6)

L-Blondy commented on June 14, 2024

It would either break with nested themes or produce a huge amount of css. See this thread for more details.

It would be interesting to see your use case for variants, can you share some code snippet?

from tw-colors.

ninox14 commented on June 14, 2024

My potential use case is for UI components kit that has different themes
The theme selected for the application and all components adhere to it

<html className="theme-two">
  <button className="rounded text-primary theme-two:rounded-lg theme-two:font-medium" />
  <input className="rounded text-secondary theme-two:rounded-lg theme-two:font-thin" />
</html>

Does it make sense?

from tw-colors.

L-Blondy commented on June 14, 2024

Makes perfect sense indeed.

If your use case is for a UI library and you don't care about nested themes, you probably want to make some tailwind components anyways. It might look something like this:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        // base styles
        '.btn': {
            padding: '.5rem 1rem',
            fontWeight: '600',
        },
        // variant for theme-two
        '.theme-two .btn': {
            borderRadius: '.25rem',
        }
        // ...
      })
    })
  ]
}

Would this work for you ?

from tw-colors.

ninox14 commented on June 14, 2024

This could work but the config file would grow with the quantity of themes and components
I feel like it would become a problem relatively fast

from tw-colors.

L-Blondy commented on June 14, 2024

If you really want that feature, tw-colors exposes the resolveTwcConfig for library authors.

You can use it to resolve the colors, utilities and variants to inject into a custom plugin.

export const myCustomPlugin = (
   config = {},
   options = {},
) => {
   const resolved = resolveTwcConfig(config, options);

   return plugin(
      ({ addUtilities, addVariant }) => {
         // add the css variables to "@layer utilities"
         addUtilities(resolved.utilities);
         // This is how tw-colors injects the variants. 
         // You might omit this part, loop over your config to add your own variants
         // carefully check out the link in my first answer before proceeding, it contains somd warnings caveouts and examples. 
         // Also check out the source code (lib/index.ts) to see the usage with Typescript
         resolved.variants.forEach(({ name, definition }) => addVariant(name, definition));
      },
      // extend the colors config
      {
         theme: {
            extend: {
               colors: resolved.colors,
            },
         },
      },
   );
};

from tw-colors.

L-Blondy commented on June 14, 2024

Added support for Variants without explicit theme declarations in v3.0.0

from tw-colors.

Variants without explicit theme declarations about tw-colors HOT 6 CLOSED

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent