tw-tag is a library for describing Tailwind CSS as a kind of DSL.
import { tw } from "tw-tag"
const tailwindClassName = tw`
flex
pt-4
text-center
rotate-90
`
console.log(tailwindClassName) // 'flex pt-4 text-center rotate-90'
function SomeComponent() {
return (
<>
<div className={tailwindClassName} />
{/* inline */}
<div className={tw`pt-4 mx-auto`} />
</>
)
}The tw function converts consecutive spaces into a single space. You can do this at build time by using the Babel plugin.
// babel.config.js
module.exports = {
plugins: [
'tw-tag/babel-plugin',
],
}// before
import { tw } from 'tw-tag'
const tailwindClassName = tw`
flex
pt-4
text-center
rotate-90
`
// after
const tailwindClassName = `flex pt-4 text-center rotate-90`If you write tw(`...`), the type will be inferred based on your input.
// type: string
const a = tw`
flex
pt-4
text-center
rotate-90
`
// type: 'flex pt-4 text-center rotate-90'
const b = tw(`
flex
pt-4
text-center
rotate-90
`)The tw`...` format will be supported once TemplateStringsArray inference is improved.
ref: microsoft/TypeScript#49552
// babel.config.js
module.exports = {
plugins: [
['tw-tag/babel-plugin', {
devLabel: false,
}],
],
}type: boolean (default value: process.env.NODE_ENV !== 'production')
Add className for debugging. format: DEV-[fileName]-[localName]
// some-file.js
const variableName = tw`p4`
// build when develop
const variableName = `DEV-someFile-variableName p4`To enable Tailwind CSS IntelliSense completion, add the setting below.
// settings.json
{
// ...
"tailwindCSS.experimental.classRegex": [
"tw\\(?`([^`]*)"
],
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent