Avoid requiring tailwindcss direct import

[bebbi]

twin imports tailwindcss behind the scenes.

Extending a default tailwind theme in the config may require directly importing from tailwindcss which in my case (gatsby in monorepo) fails to build unless tailwindcss is added as a direct package.json dependency. But this can lead to version inconsistencies.

Example:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    fontFamily: {
      body: [
        'Roboto',
        ...defaultTheme.fontFamily.sans.filter((item) => item !== 'Roboto'),
      ],
    },
  }
}

Since twin imports tailwindcss, it might lead to a consistent experience if it exposes such tailwind interfaces?

Even something like:

const defaultTheme = require('twin/tailwindcss/defaultTheme')

[ben-rogerson]

I think that's a great idea.
Are there any other interfaces you'd like to see added?

[bebbi]

In a gatsby/twin project the only other thing is the gatsby-browser.js file with the

import 'tailwindcss/dist/base.min.css'

line that I think is still required.

If it is, perhaps someone might also need tailwindcss/dist/base.css for troubleshooting? Not sure about that.

[ben-rogerson]

That guide needs to be updated, the base.min.css file is now added via the <GlobalStyles /> import.

GlobalStyles also adds some keyframes for the animation classes and some variables for some other classes. Check this PR.

[ben-rogerson]

I've decided to go with the tailwindcss installation as it's the easiest way to tackle this and there were some current issues installing twin with yarn when not adding tailwindcss yourself.

[bebbi]

I.e. developer installs twin and tailwindcss? Sounds good to me!