Accessing additional settings in theme.json about _tw-themejson HOT 8 CLOSED

Thanks for this! My mind went somewhere else when I saw "variable," so I didn't pick up on the CSS variable angle. That looks like a solid approach!

I'm going to add a line to the theme.json documentation this week, at which point I'll close this out (and confirm you don't have any feedback).

Thanks again!

from _tw-themejson.

Perfect, thanks again!

from _tw-themejson.

It's not a top-level priority for me, but I'm open to it if there's interest.

Just to clarify, you'd like to take something like this:

"settings": {
	"typography": {
		"fontSizes": [
			{
				"size": "0.75rem",
				"slug": "small"
			},
			{
				"size": "1rem",
				"slug": "medium"
			},
			{
				"size": "1.25rem",
				"slug": "large"
			}
		]
	}
}

And have text-small, text-medium, and text-large be available in Tailwind? And more or less the same for spacingSizes, applying everywhere the spacing key applies in Tailwind?

Also, since you're here, do you have an opinion on issue #2?

from _tw-themejson.

Your example is exactly what I was asking about.

However, the more I thought about it the more it made sense to not grab the font sizes from theme.json. I can assign size, line height, letterspacing etc... in tailwind but not in theme.json (yet). So, what I've decided to do is use the font size variables from theme.json and have them define the font size in the tailwind config. This way I get the benefit of tailwinds typography sets while only defining the sizes once.

On issue #2, I have no issue with the tailwind colors being removed when the same color is added to theme.json. I would actually prefer to only have my colors defined in theme.json to keep parity between the editor and tailwind. Adding it to the documentation would be helpful just to reduce surprises though.

Thanks for all your work on this, it's been very helpful.

from _tw-themejson.

So, what I've decided to do is use the font size variables from theme.json and have them define the font size in the tailwind config. This way I get the benefit of tailwinds typography sets while only defining the sizes once.

Can you elaborate on this a bit more? I'd be curious to hear more about your approach. Are you also using the fontSizes key from the theme.json file?

Thanks for your thoughts on issue #2! I'll add a note to the documentation. Your preferences mirror mine, but it's great to have a second opinion.

from _tw-themejson.

In theme.json I am setting my font size

"fontSizes": [
  {
    "size": "clamp(64px, calc(4rem + ((1vw - 10px) * 14)), 106px)",
    "slug": "7xl"
  }
}

and in the tailwind.config I'm using the variable generated by theme.json to set the font-size.

fontSize: {
  '7xl': [
    'var(--wp--preset--font-size--7-xl)', {
    lineHeight: '0.8',
    fontWeight: '900',
  }]
},

This doesn't really fix anything on the editor side, but it does allow my keep my font size consistent between the two and if I want to override the font-size in the editor I still can.

from _tw-themejson.

I've updated the documentation on GitHub, adding the following line:

If one or more of your color palette’s slug values matches a slug in Tailwind’s default color palette, those colors from the default palette—including all shades—will be overridden by the color value from your theme.json file.

Does that sound right to you? I'll wait a day or two before publishing the update to npm (so that if you or anyone else have feedback, I can address it without incrementing the version number a second time).

from _tw-themejson.

Makes sense to me.

from _tw-themejson.