Skip to content

A extension for Twind that provides a CSS content property directive.

License

Notifications You must be signed in to change notification settings

tw-in-js/twind-content

Repository files navigation

@twind/content

A Twind extension that provides a CSS content property directive.

MIT License Latest Release Github Module Size Typescript

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: "✅"; }
  1. 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; }
  1. 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); }
  1. 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

License

MIT