twind

The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

MIT License

Downloads
203.9K
Stars
3.7K
Committers
19
View Code on GitHub Visit Website
Ecosystems: Tailwind CSS, CSS

Bot releases are hidden (Show)

twind -

Published by sastan almost 2 years ago

  • chore: update readme b8424f7e

https://github.com/tw-in-js/twind/compare/v0.16.18...v0.16.19

twind - v1.0.1

Published by sastan almost 2 years ago

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

  • introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7)

  • prevent name mangling of toplevel variables when creating a iife script (696f72b7)

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

[email protected]

Patch Changes

[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

  • introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7)

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

  • introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7)

@sites/[email protected]

Patch Changes

  • introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7)

  • default to latest version (696f72b7)

  • fix latest tag resolution (696f72b7)

@sites/[email protected]

Patch Changes

  • introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7)

  • publish main branch (696f72b7)

@sites/[email protected]

Patch Changes

twind - v1.0.0

Published by sastan almost 2 years ago

Releases

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

[email protected]

Patch Changes

  • helpful error message during dev when no active twind instance is found (fe891f9c)

  • big documentation update (a63ca2cb)

  • allow for cssom and dom to accept a selector string to find the server rendered stylesheet (e2c17a2e)

  • BREAKING: use install instead of setup for cdn configuration to align with other integrations (d481948b)

  • handle hex encoded ampersand (a61e0d1d)

  • warn about invalid classes and invalid css during development (e6acbea2)

    When run in development mode, which is determined by the export condition development, twind notifies about invalid classes and invalid css.

    Further reading:

    In the the browser a warning event is emitted on the window object and, in case there is no event listener or the event listener did not call event.preventDefault(), a warning is logged to the console.

    addEventListener('warning', (event) => {
  // prevent default console.warn(`[<code>] <message>: <detail>`) logging
  event.preventDefault()

  const warning = event.detail

  // { message: '...', code: 'TWIND_INVALID_CLASS', detail: '<className>'}
  // { message: '...', code: 'TWIND_INVALID_CSS', detail: '<css>'}
  console.warn(warning)
})

    In Node.js a warning is emitted using process.emitWarning.

    If there is no warning event listener, the warning is printed to stderr.

    (node:56338) [TWIND_INVALID_CLASS] Warning: ...

    Alternatively, you can use the process.on('warning', ...) to handle warnings.

    import process from 'node:process'

process.on('warning', (warning) => {
  console.warn(warning.message) // Print the warning message
  console.warn(warning.code) // 'TWIND_INVALID_CLASS' | 'TWIND_INVALID_CSS'
  console.warn(warning.detail) // '<className>' | '<css>'
})

  • initial intellisense support (2ac8e695)

  • stringify in user config always wins (0705e419)

[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@example/[email protected]

Patch Changes

@sites/[email protected]

Patch Changes

  • create cdn.twind.style worker as proxy to jsdelivr (a7ca73ec)

@sites/[email protected]

Patch Changes

@sites/[email protected]

Patch Changes

twind - v0.16.18

Published by sastan almost 2 years ago

  • chore: move into new legacy branch 3f293288
  • add border edge colors (#373) 21a9671e
  • fix typo in svelte.md (#366) 05d56f63
  • Removed duplicate documentation sections in extended-functionality (#358) 189abc3c
  • added missing word & replaced duplicated phrase (#352) ed4b010b
  • Minor typo in grouping syntax doc (#360) 22915344
  • Fix typo in tailwind migration guide (#355) 4115c775
  • typo fix in google url font import (#357) b25a77c4
  • correct tailwind documentation link (#341) a1a30bf5
  • docs: fix one typo and update two links (#342) 63325db2
  • chore: update discord invite links ca3240c8

https://github.com/tw-in-js/twind/compare/v0.16.17...v0.16.18

twind - v1.0.0-next.39

Published by sastan about 2 years ago

All packages have been update to 1.0.0-next.39


This release has been sponsored by COPILOT TRAVEL who are partnering with @sastan to keep twind aligned with the latest tailwindcss releases.

@twind/[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

  • ensure mix-blend-plus-lighter works (3d192886)

  • ensure optional variant works (8f2ddfa2)

  • add border-spacing utilities (31928160)

  • add prefers-contrast media query variants (226f38dd)

  • Arbitrary variants (a3b1bcba)

  • Add ::backdrop to universal defaults (cd694cee)

  • Add <alpha-value> placeholder support for custom colors (closes #349) (0a63948e)

  • feat: support rgb and hsl colors opacity conversion (#336) πŸ™πŸ½ @javascriptjedi!

  • support alpha values for theme() function (bdc0a7a1)

  • ensure enabled variant works (a73f1773)

  • add backdrop variant (f0e532f1)

  • add .grid-flow-dense utility (65ea2f61)

  • add text-start and text-end (ea9684ed)

  • prevent orphaned style tag when calling setup multiple times (closes #321) (0e2aa5c4)

  • remove default [hidden] style in preflight (eb016032)

  • support font-weight in font-size utilities (d22ddb9c)

[email protected]

Patch Changes

@twind/[email protected]

Patch Changes

  • update to @sveltejs/[email protected] (the new routing system) πŸ™πŸ½ @SergeiZheleznov!

New Contributors

Full Changelog: https://github.com/tw-in-js/twind/compare/v1.0.0-next.38...v1.0.0-next.39

twind - v1.0.0-next.38

Published by sastan over 2 years ago

All packages have been update to 1.0.0-next.38

[email protected]

Patch Changes

  • fix: replace escaped quotes within class names during SSR (b212b52f)

  • Rewrites HTML entity & when self-referenced groups are used with (p)react (782f93df) πŸ™πŸ½ @rschristian!

  • feat: preserve classes created by explicit tw calls during SSR (fe88051d)

    Previously inline and extract cleared the tw instance before parsing the html assuming that all classes are available via class attributes. That led to missing styles from injectGlobal or explicit tw calls.

    This change introduces a snaphot method on tw and sheet instances which allows to preserve the classes that are created by explicit tw calls.

    Default Mode (nothing changed here)

    import { inline } from 'twind'

function render() {
  return inline(renderApp())
}

    Library Mode

    import { tw, stringify } from 'twind'

function render() {
  // remember global classes
  const restore = tw.snapshot()

  // generated html
  const html = renderApp()

  // create CSS
  const css = stringify(tw.target)

  // restore global classes
  restore()

  // inject as last element into the head
  return html.replace('</head>', `<style data-twind>${css}</style></head>`)
}

  • fix: gradients with arbitrary color stop positions (#296) (77954405)

@twind/[email protected]

Patch Changes

twind - v1.0.0-next.37

Published by sastan over 2 years ago

  • fix: workaround for replaced ' and " when using react renderToString (08c66ee8)
twind -

Published by sastan over 2 years ago

  • fix: ensure :is(...) selector is probably parsed 99e9f7cb
  • fix: fix plugin detection routine (#208) 0468de3d
  • chore: Removes unnecessary whitespace from shadow colors (#235) 24c74837
  • TypeScript typings improvement: replace unknown[] used in apply(), process(), tw(), and parse() (#234) f79c93d2
  • feat: Export group expansion utility (#233) 15441649
  • docs: Updating quick-reference link (#229) 94dd8e14
  • fix: add the missing new color "sky" (#214) e04ae1f6
  • Fix contribution guide dead link in README (#207) c303c1d6
  • Docs: correct typo in variant grouping section (#199) a1a6dc22
  • Update link in tailwind migration guide to point to configuration page (#194) 4a05d6b4
  • chore 33ffb719
  • test: max-w-... look into width instead on maxWidth in theme in safari 408870cc

https://github.com/tw-in-js/twind/compare/v0.16.16...v0.16.17

twind - v1.0.0-next.36

Published by sastan over 2 years ago

a new pre-release is availabe: 1.0.0-next.36

@twind/preset-ext

  • feat: add descendants selector using _ eg &_span:underline; can be combined with other selectors &_h1>span~a:underline (cbd37a10)
  • fix: group/peer hocus named group regex (8f1288a0)

@twind/preset-tailwind

  • refactor: move hashing of vars (--tw-<...>) from preset-tailwind into core β€” this allows var hashing without the tailwind preset (ae979d12)
  • Add missing height properties max/min/fit-content (#285) πŸ™πŸ½ @IgnusG!
  • fix: use text-decoration-line (346efc4e)

@twind/preset-tailwind-forms

  • fix: use text-decoration-line (346efc4e)

@twind/preset-typography

  • feat: add @twind/preset-typography (e3796bf9)
  • fix: use text-decoration-line (346efc4e)

twind

  • relax some typings where the actual generic type does not matter (28cbaef5)

  • fix: ensure colors DEFAULT values override nested objects (43d61076)

  • refactor: include full precendence in resume data (80ce410a)

  • fix: move styles generated by animation() into components layer β€” this allows to override animation properties using utilities (39b45125)

  • feat: auto dark colors (2f8f69d2)

    If enabled, automatic dark colors are generated for each light color (eg no dark: variant is present). This feature is opt-in and twind provides a builtin function that works with tailwind color palettes (50, 100, 200, ..., 800, 900).

    import { autoDarkColor } from 'twind'

defineConfig({
  // for tailwind color palettes: 50 -> 900, 100 -> 800, ..., 800 -> 100, 900 -> 50
  darkColor: autoDarkColor,
  // other possible implementations
  darkColor: (section, key, { theme }) => theme(`${section}.${key}-dark`) as ColorValue,
  darkColor: (section, key, { theme }) => theme(`dark.${section}.${key}`) as ColorValue,
  darkColor: (section, key, { theme }) => theme(`${section}.dark.${key}`) as ColorValue,
  darkColor: (section, key, context, lightColor) => generateDarkColor(lightColor),
})

    Example css for text-gray-900:

    .text-gray-900 {
  --tw-text-opacity: 1;
  color: rgba(15, 23, 42, var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
  .text-gray-900 {
    --tw-text-opacity: 1;
    color: rgba(248, 250, 252, var(--tw-text-opacity));
  }
}

    The auto-generated dark color can be overridden by the usual dark:... variant: text-gray-900 dark:text-gray-100.

    .text-gray-900 {
  --tw-text-opacity: 1;
  color: rgba(15, 23, 42, var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
  .text-gray-900 {
    --tw-text-opacity: 1;
    color: rgba(248, 250, 252, var(--tw-text-opacity));
  }
}
@media (prefers-color-scheme: dark) {
  .dark\\:text-gray-100 {
    --tw-text-opacity: 1;
    color: rgba(241, 245, 249, var(--tw-text-opacity));
  }
}

  • fix: handle color function in replacement for theme(...) (9fc5baec)

  • fix: always use rgba color (aaad7e44)

  • refactor: move hashing of vars (--tw-<...>) from preset-tailwind into core β€” this allows var hashing without the tailwind preset (ae979d12)

  • fix: prevent double class name hashing (fc9b0c27)

  • fix: use text-decoration-line (346efc4e)

  • fix: ensure theme returns all sections (8bbc2a42)

  • fix: use same color section detection (8dfd105b)

@twind/with-next

  • relax some typings where the actual generic type does not matter (28cbaef5)
twind - 1.0.0-next.35

Published by sastan over 2 years ago

all packages have been updated to version 1.0.0-next.35

@twind/preset-tailwind

  • BREAKING: rename enablePreflight to disablePreflight to make it more clear what this option is used for and what its default is (53058c2e)

@twind/tailwind

  • DEPRECATE: @twind/tailwind β€” use @twind/preset-autoprefix and @twind/preset-tailwind directly (47ed17b3)

    Adjust your package.json:

    {
  "dependencies": {
+    "@twind/preset-autoprefix": "1.0.0-next.34",
+    "@twind/preset-tailwind": "1.0.0-next.34",
-    "@twind/tailwind": "1.0.0-next.34",
  }
}

    If you are using defineConfig from @twind/tailwind:

    -import { defineConfig } from '@twind/tailwind'
+import { defineConfig } from 'twind'
+import presetAutoprefix from '@twind/preset-autoprefix'
+import presetTailwind from '@twind/preset-tailwind'

export default defineConfig({
+  presets: [presetAutoprefix(), presetTailwind()],
  /* config */
})

    If you are using setup from @twind/tailwind:

    -import { setup } from '@twind/tailwind'
+import { setup } from 'twind'
+import presetAutoprefix from '@twind/preset-autoprefix'
+import presetTailwind from '@twind/preset-tailwind'

export default setup({
+  presets: [presetAutoprefix(), presetTailwind()],
  /* config */
})

@twind/with-next

  • add Next.js integration and example (df5fc751)

@twind/with-remix

  • add remix integration and example (98688bcb)

@twind/with-sveltekit

  • BREAKING: use new @twind/with-sveltekit package name (60db0177)
twind -

Published by sastan over 3 years ago

  • fix: re-export star exports 09e964f6

https://github.com/tw-in-js/twind/compare/v0.16.15...v0.16.16

twind -

Published by sastan over 3 years ago

  • fix: remove stacktraces from warnings ca866c56

https://github.com/tw-in-js/twind/compare/v0.16.14...v0.16.15

twind -

Published by sastan over 3 years ago

  • chore 97f7116d
  • fix: observe handle all pending mutation at once f19c1322
  • fix: backdrop filter use correct CSS propeprty 34a5d1e2
  • chore 0e1bdc97
  • fix: allow string arrays for themeoutline 97fdccda
  • fix: resize plugin use correct CSS values 99db2163

https://github.com/tw-in-js/twind/compare/v0.16.13...v0.16.14

twind -

Published by sastan over 3 years ago

  • fix: add filter and backdrop-filter to default transition d04851a0
  • doc: add Andrewnt219 to sponsors 0259efc9

https://github.com/tw-in-js/twind/compare/v0.16.12...v0.16.13

twind -

Published by sastan over 3 years ago

  • golf: some bytes 4bf60d3a
  • feat: add new bg-origin-* utilties b2cc697f
  • fix: properly handle arbitrary var names with dashed digits (#176) 20239b0f

https://github.com/tw-in-js/twind/compare/v0.16.11...v0.16.12

twind -

Published by sastan over 3 years ago

  • fix: calc support in arbitrary values 15e714c0
  • feat: add new tailwind v2.1 utilities b0d2e06e
  • fix: add variants of helper 9027e825
  • fix: use fast shim method for website ac53e198
  • doc: use cdn minified version 56618d86

https://github.com/tw-in-js/twind/compare/v0.16.10...v0.16.11

twind -

Published by sastan over 3 years ago

  • adds support for the important modifier ! as prefix to align the syntax with windicss and tailwindcss-jit (#164) d45709e1

    Rule Class Names
    !text-center !text-center
    !-m-8 !-m-8
    !(text-center font-bold) !text-center !font-bold
    hover:!(text-center font-bold) hover:!text-center hover:!font-bold
    !hover:(text-center focus:font-bold) hover:!text-center hover:focus:!font-bold
    text!(xl underline) !text-xl !text-underline
    !text(xl underline) md:!m(-8) !text-xl !text-underline md:!-m-8

    The suffix syntax is still supported but the emitted class is transformed to the new syntax: font-bold! -> !font-bold

  • fix: mark function calls as pure to allow tree-shaking 28f7031f

  • fix: types of twind/colors to make them assignable to theme colors e22ac18e

https://github.com/tw-in-js/twind/compare/v0.16.9...v0.16.10

twind -

Published by sastan over 3 years ago

  • chore: deps upgrade a501131d
  • fix: split plugins into core and user 3eba61b8
  • fix: ring-offset completion types 3c0c80bf
  • fix: prevent bundlers/transpilers from breaking the virtual sheet a2206649

https://github.com/tw-in-js/twind/compare/v0.16.8...v0.16.9

twind -

Published by sastan over 3 years ago

  • fix: completions for p*, m*, font-, text- and space-* f73467e9

https://github.com/tw-in-js/twind/compare/v0.16.7...v0.16.8

twind -

Published by sastan over 3 years ago

  • doc: readme add opencollective bakers a81e1efe

  • fix: multiple selector replacement with arbitrary values b37b074d

  • fix: support named color in arbitrary value 7f48c593

  • feat: support attribute selectors variants (#151) ba46fb7d

    Class Name Selector
    [lang]:font-bold \[lang\]\:font-bold[lang]
    not-[lang]:italic .not-\[lang\]\:italic:not([lang])
    [aria-expanded='true']:font-bold \[aria-expanded\=\'true\'\]\:font-bold[aria-expanded='true']
    [data-reach-menu-item][data-selected]:bg-red-300 \[data-reach-menu-item\]\[data-selected\]\:bg-red-300[data-reach-menu-item][data-selected]
    [href^='#']:bg-yellow-400 \[href\^\=\'\#\'\]\:bg-yellow-400[href^='#']
    [href*='example']:bg-gray-300 \[href\*\=\'example\'\]\:bg-gray-300[href*='example']
    [href$='.org']:bg-red-400 \[href\$\=\'\.org\'\]\:bg-red-400[href$='.org']
    [href^='https'][href$='.org']:bg-green-400 \[href\^\=\'https\'\]\[href\$\=\'\.org\'\]\:bg-green-400[href^='https'][href$='.org']
    [lang~='en-us']:text-blue-400 \[lang\~\=\'en-us\'\]\:text-blue-400[lang~='en-us']
    [lang|='zh']:text-red-400 \[lang\|\=\'zh\'\]\:text-red-400[lang|='zh']
    [data-lang='zh-TW']:text-purple-400 \[data-lang\=\'zh-TW\'\]\:text-purple-400[data-lang='zh-TW']
Package Rankings
Top 1.45% on Npmjs.org
Top 6.7% on Proxy.golang.org
Badges
Extracted from project README
MIT License Latest Release Documentation Github Discord CI Coverage Status
Related Projects
tailwindcss

A utility-first CSS framework for rapid UI development.

06 Oct 2017 82,305
TW-Elements

𝙃π™ͺπ™œπ™š collection of Tailwind MIT licensed (free) components, sections and templates 😎

06 Nov 2012 12,632
typed-tailwind

Brings types to TailwindCSS via TypeScript.

30 Sep 2019 413
tailwindcss-classnames

Functional typed classnames for TailwindCSS

24 Jan 2020 691
tailorwind

Reusable and extensible React components using Tailwind CSS πŸ§ΆπŸ’™

05 Sep 2023 3
windicss

Next generation utility-first CSS framework.

29 Dec 2020 6,505
tailwind-variants

πŸ¦„ Tailwindcss first-class variant API

12 Jan 2023 1,914