Skip to content

Instantly share code, notes, and snippets.

@sastan
Last active October 3, 2023 16:10
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sastan/c4d8deb112660498431eaa66887958ce to your computer and use it in GitHub Desktop.
Save sastan/c4d8deb112660498431eaa66887958ce to your computer and use it in GitHub Desktop.
Extract CSS Object from Tailwind classes
import { create } from 'https://cdn.skypack.dev/twind'
const { tw: TW } = create({ preflight: false })
const tw = (...tokens) => {
let styles
TW(({ css }) => {
styles = css(...tokens)
styles._ = undefined
return ''
})
return styles
}
console.log('styles', tw('text-white'))
console.log('styles', tw`text-white bg-black`)
console.log('styles', tw`text-white bg-black`)
@sastan
Copy link
Author

sastan commented Feb 26, 2021

This function supports all the advanced Twind syntax like grouping, CSS helper, tailwind extensions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment