@twind/content

A Twind extension that provides a CSS content property directive.

Installation

Install from npm:

# Using npm
npm install @twind/content

# Using Yarn
yarn add @twind/content

Usage as Directive

❗ Values must be adhere to CSS content property syntax.

import { content } from '@twind/content'

tw`${content('"✅"')}`
// => .tw-xxxx { content: "✅" }

tw`before::${content('"✅"')}`
// => .tw-xxxx::before { content: "✅" }

tw`before::${content('attr(data-content)')}`
// => .tw-xxxx::before { content: attr(data-content) }

tw`after::${content('" (" attr(href) " )"')}`
// => .tw-xxxx::after { content: " (" attr(href) " )" }

Usage as Plugin

Add to plugins of your setup call:

import { content } from '@twind/content'

setup({
  plugins: {
    content,
  },
  // Optional: define content value aliases
  theme: {
    content: {
      check: '"✅"',
    },
  },
})

The following patterns are tried in order:

1. content-<theme> with { theme: { content: { key: value } } }

tw`before::content-check` // with { theme: { content: { check: '"✅"' } } }
// => .before\:\:content-check::before { content: "✅"; }

2. content-(known value)

List of known values:

• open-quote
• close-quote
• no-open-quote
• no-close-quote
• normal
• none
• inherit
• initial
• unset

tw`before::content-open-quote`
// => .before\:\:content-open-quote::before { content: open-quote; }

3. content[-(attr|data|counter|var)-value]

tw`content`
// => .content { content: attr(data-content); }

tw`before::content`
// => .before\:\:content::before { content: attr(data-content); }

tw`before::content-data-before`
// => .before\:\:content-data-before::before { content: attr(data-before); }

tw`before::content-attr-href`
// => .before\:\:content-attr-href::before { content: attr(href); }

tw`before::content-counter-chapter_counter`
// => .before\:\:content-attr-data-before::before { content: counter(chapter_counter); }

tw`before::content-var-before`
// => .before\:\:content-var-before-before::before { content: var(--before); }

4. content-<value> using JSON.stringify

tw`before::content-✅`
// => .before\:\:content-✅::before { content: "✅"; }

FAQs

Why is this not part of Twind? There is not a official Tailwindcss content specification. By not adding it to Twind we prevent future incompatibilities.

Prior Work

• https://github.com/croutonn/tailwindcss-pseudo-elements
• https://github.com/sgrowe/tailwind-pseudo-elements

License

MIT