twin.macro: Tailwind defaults are missing

Hi again @ben-rogerson in setting up Twin, I’m not seeing some important TW default styles: namely the opacity variables:

  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;

These are needed for theming with custom colors. See https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo/issues/1#issuecomment-770595786 for more detail on that.

So, your docs don’t say what the correct way to import defaults are, as far as I can see? I’ve tried a number of things. I’m using Gatsby and their tailwind setup docs say to add this import to the top-level file (gatsby-browser.js):

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

This unfortunately didn’t add the opacity resets. I also notice you omit the @tailwind directives css file that Tailwind recommends, often called tailwind.css or just added to global.css in some examples:

@tailwind base;
@tailwind components;
@tailwind utilities;

Since you omit the latter in your Code Sandbox example I figure we don’t need it, but I think we do need some sort of global base css import to get things to work right. If I manually add the two opacity variables to my global css things work correctly, but I imagine there are a lot of other defaults I don’t know about yet as well.

Solution? Thanks!

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (9 by maintainers)

Most upvoted comments

If I import the fancy new colors from tailwind to use them like this example, it does include all of the new colors but converts all usable color utilities to bg-colors-sky-500 text-colors-white etc.

Adding ‘-colors-’ to each color utility. This is odd and very undesirable. Please help me understand how to include and use all of the v3 TW colors that are now included by default without having to do this workaround and change the classnames from the official documentation. Thanks!

johngilesyoder on Jul 20, 2022

Hey check out the latest version of twin.macro@2.7.0 - there’s some missing variables added that should fix this.

ben-rogerson on Aug 22, 2021

Cool, so today I’m not seeing the hot reloading glitches when setting fonts using css vars. My computer must’ve needed a nice long weekend: 😉

Thanks again for your fast replies Ben. Enjoying Twin so far!

mosesoak on Jun 21, 2021

I’m having trouble figuring out where Tailwind initially supplies any top level default for that variable.

I don’t think they do, it’s added with the bg-xx/text-xx classes instead. Then when you add an opacity, it overwrites it. But with color functions in your tailwind.config.js, I think twin may need to merge it in so you don’t need to add it yourself. I’ll have to see if this is how tailwind is doing it.

ben-rogerson on Jun 17, 2021

Cheers for the feedback, much appreciated 😃

I like that you show an example of doing global styles fully in JS here, but wanted to point out that you don’t use that in the Layout import.

Ah damn, my example is incorrect. That Layout.js file in Gatsby should use the component from styles/GlobalImport.js:

import React from 'react'
import GlobalStyles from './../styles/GlobalStyles'

const Layout = ({ children, ...rest }) => (
  <div {...rest}>
    <GlobalStyles />
    {children}
  </div>
)

export default Layout

Your package.json includes @babel/plugin-proposal-decorators and @emotion/babel-plugin-jsx-pragmatic but those aren’t mentioned in the readme. (?)

@babel/plugin-proposal-decorators: I think this is a legacy package that needs to be removed from the example.
@emotion/babel-plugin-jsx-pragmatic: This looks like legacy too - the gatsby-plugin-emotion plugin takes care of adding the css prop via @emotion/babel-preset-css-prop

ben-rogerson on Jun 17, 2021