theme.config.js file not found

[regenrek]

Hi,

first thanks for this awesome plugin really like the
theme manager approach!

I've some problems to load the custom theme.config.js file.

• I'm using tailwindcss-theming@next

The documentation is partly misleading but I tried all variations:

• tailwind.config.js
  ✅

      require('tailwindcss-theming')({
preset: 'nord'
})

❌

      require('tailwindcss-theming'),

❌ documented in #18

module.exports = {
  theme: {},
  variants: {},
  plugins: [
    require('./theme.config.js')
  ],
};

• theme.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { ThemeManager, Theme } = require('tailwindcss-theming/api');


const light = new Theme()
  .setName('light')
  .targetable()
  .addColors({
    sun: '#717171',
    moon: '#717171',
    sparkles: '#717171',
    background: '#f1f1f1',
    'on-background': 'black',
  });

const dark = new Theme()
  .setName('dark')
  .targetable()
  .addColors({
    sun: '#ffd94d',
    moon: '#909090',
    sparkles: '#9e9ed6',
    background: '#212121',
    'on-background': 'white',
    });

module.exports = new ThemeManager()
  .setDefaultTheme(light)
  .setDefaultDarkTheme(dark);

[innocenzi]

Hm, your theme.config.js configuration looks good. The correct way to include tailwindcss-theming is by simply requiring it:

plugins: [
  require('tailwindcss-theming')
],

That error should not happen, and even less in the browser. If it had to happen, it would be at build-time, within Node.

Can you tell me what are the steps to reproduce this? How do you build Tailwind? Also, is tailwindcss-theming in your devDependencies, and not in your dependencies? And what Node version do you have?

[regenrek]

Hi,

devDependencies:
"tailwindcss-theming": "^3.0.0-beta.1"

node 12.4
I'm using vue-cli

Nothing to reproduce but here is the branch I'm working on https://github.com/regenrek/vue-ts-css-in-js-dark-mode-example/tree/th

EDIT: Did some more investigation.

• The problem happen because fs can't be used. I'm currently see if I need to adjust vue-cli's webpack configuration to support this. (Not sure if this is the problem anyway).
• Additionally my theme.config.js can't be found. The resolving doesn't seem to work.

[innocenzi]

The issue seems to reside in useTheme where you're resolving and building Tailwind at run-time.

tailwindcss-theming is meant to be used at build-time, and makes use of Node's API which is not available in the browser. This is the reason you can't access fs.

You should make sure that you understand how Tailwind works: it's a PostCSS plugin. In your App.tsx, you directly import Tailwind's CSS. It kills its purpose since Tailwind is meant to be built based on your configuration, tailwind.config.js, which is not the case at all in your setup, unless I missed something.

Either way, this is not an issue that I can solve. tailwindcss-theming can't be used in the browser.

By the way, not sure if you knew, in a Vue CLI project, you can use postcss.config.js. This is actually where you should import Tailwind.

[regenrek]

Thanks for the tip about the runtime issue. This makes totally sense. Maybe there is a way around since presets work fine and the current problem exists only because of the use of fs (i guess) which is not available in browser.

For the other part: I'm using twin.macro which allows me to use tailwind classes within css-in-js libraries like emotion - which is the goal of this repository. Tailwind classes won't be included in the production build (via babel macro).

To finalize this repo it would be nice to have your theming system supported.

https://twin-docs.netlify.app/plugin-support

Regards!

[innocenzi]

Not sure if it'll help, but the themes option of the plugin can accept a ThemeManager object, which means that if you create your themes in tailwind.config.js, you don't need to have a theme.config.js.

// tailwind.config.js
const { ThemeManager, Theme } = require('tailwindcss-theming/api');

const themes = new ThemeManager() // add your themes

module.exports = {
  plugins: [
    require('tailwindcss-theming')({
      themes
    })
  ]
}

I didn't test, and it's possible that fs is used anyway, but if you really want to use tailwindcss-theming, that can be one way.

Can I close the issue?