Using twind to generate css files using theme/default values.

I have a specific use case, which I believe twind can help with. My problem is that most of my site is using the tailwind pattern, which works well since I control the rendering code - and therefore I can apply classes onto elements. However, a part of my site uses a markdown renderer, and I have some very complex css selectors that are used to render that markdown nicely. I don’t control the DOM generation. However, I would like things like colors and spacings to use some of the values from my twind setup. It thought that the css-in-js section of the docs would cover this, but it doesn’t look like it does (or maybe the docs just need to clarify?)

For example I would like to generate a css string to be included in a .css file that has something like:

var myCssText = `
  .markdown-root > p > a {
    color: ${twind.theme.blue.300}
  }
`

Is this workflow supported and/or documentation explaining how to do this?

I’m also curious how one would specify variants as well where the answer to “what is the css inline style for dark:bg-0?” is not “background: black”, but rather "well, it depends on if your page has dark mode enabled, and that depends on if your theme was set up with darkMode:class or not. So the answer to the question would not necessarily be a style but selector + style.

[sastan]

This is now possible in twind v1.

import { twind, virtual, css, stringify } from 'twind'
const tw = twind({ /* config */ }, virtual())

const myCssText = css`
  .markdown-root > p > a {
    color: theme(colorsblue.300);
  }
`
// start fresh
tw.clear()
// inject styles
tw(myCssText)
// grep css strings
const cssString = stringify(tw.target)

Please give it a try. Here are some links to get you started:

• The v1 branch
• Reference until the website is ready
• Examples — the CDN example could be a good start

Closing this for now. Feel free to re-open.

[sastan]

You can combine Daniels solution with the extraction and dark mode support from this example