The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
MIT License
Bot releases are hidden (Show)
https://github.com/tw-in-js/twind/compare/v0.16.18...v0.16.19
Published by sastan almost 2 years ago
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
)
Updated dependencies [696f72b7
, 696f72b7
]:
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
)
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
696f72b7
)introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
696f72b7
)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
)
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
publish main branch (696f72b7
)
introduce new @twind/core package to prevent issue with existing code that imports from CDNs without a version (696f72b7
)
publish main branch (696f72b7
)
Updated dependencies [696f72b7
, 696f72b7
]:
Published by sastan almost 2 years ago
big documentation update (a63ca2cb
)
BREAKING: use install
instead of setup
for cdn configuration to align with other integrations (d481948b
)
Updated dependencies [fe891f9c
, a63ca2cb
, 2ac8e695
, e2c17a2e
, d481948b
, a61e0d1d
, 9cff65de
, c5294b03
, e6acbea2
, f1c81c9f
, 2ac8e695
, 0705e419
, e404e844
]:
big documentation update (a63ca2cb
)
initial intellisense support (2ac8e695
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
support arbitrary variants in group:
and peer:
(2ac8e695
)
fix: underline-offset-*
classes (9cff65de
)
closes #389
ensure to re-use defined variants in peer and group classes (c5294b03
)
add [hidden]
to preflight (f1c81c9f
)
initial intellisense support (2ac8e695
)
add overflow rule tests (e404e844
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
only import used colors (eeb8049a
)
Generate both global styles and classes by default (edc16da4
)
fix rule regexp generation (abb35f5c
)
Updated dependencies [fe891f9c
, a63ca2cb
, 2ac8e695
, e2c17a2e
, d481948b
, a61e0d1d
, 9cff65de
, c5294b03
, e6acbea2
, f1c81c9f
, 2ac8e695
, 0705e419
, e404e844
]:
big documentation update (a63ca2cb
)
update to @tailwindcss/[email protected] (089b8977
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
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
)
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, e2c17a2e
, d481948b
, a61e0d1d
, e6acbea2
, 2ac8e695
, 0705e419
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, 2ac8e695
, e2c17a2e
, d481948b
, a61e0d1d
, 9cff65de
, c5294b03
, e6acbea2
, f1c81c9f
, 2ac8e695
, 0705e419
, e404e844
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, 2ac8e695
, eeb8049a
, e2c17a2e
, d481948b
, a61e0d1d
, 9cff65de
, c5294b03
, e6acbea2
, f1c81c9f
, 2ac8e695
, 0705e419
, e404e844
, edc16da4
, abb35f5c
]:
big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, 2ac8e695
, eeb8049a
, e2c17a2e
, d481948b
, a61e0d1d
, 9cff65de
, c5294b03
, e6acbea2
, f1c81c9f
, 2ac8e695
, 0705e419
, e404e844
, edc16da4
, abb35f5c
]:
a63ca2cb
)big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, 2ac8e695
, e2c17a2e
, d481948b
, a61e0d1d
, 9cff65de
, c5294b03
, e6acbea2
, f1c81c9f
, 2ac8e695
, 0705e419
, e404e844
]:
a63ca2cb
)big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, 2ac8e695
, e2c17a2e
, d481948b
, a61e0d1d
, 9cff65de
, c5294b03
, e6acbea2
, f1c81c9f
, 2ac8e695
, 0705e419
, e404e844
]:
a63ca2cb
)a7ca73ec
)a63ca2cb
)big documentation update (a63ca2cb
)
Updated dependencies [fe891f9c
, a63ca2cb
, 089b8977
, 2ac8e695
, e2c17a2e
, d481948b
, a61e0d1d
, 9cff65de
, c5294b03
, e6acbea2
, f1c81c9f
, 2ac8e695
, 0705e419
, e404e844
]:
Published by sastan almost 2 years ago
svelte.md
(#366) 05d56f63https://github.com/tw-in-js/twind/compare/v0.16.17...v0.16.18
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.
db7ab089
)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
)
configurable Dark Mode ClassName (774e2bb4
)
Arbitrary variants (a3b1bcba
)
injectGlobal
support for @media print (#333, #334) π @javascriptjedi! ([
9b5e3297`](https://github.com/tw-in-js/twind/commit/9b5e3297470f9d2bdbd4f540d819ee0f42e63595))
feat: support rgb and hsl colors opacity conversion (#336) ππ½ @javascriptjedi!
support alpha values for theme()
function (bdc0a7a1
)
fix missing spaces around arithmetic operators (f74163ba
)
Full Changelog: https://github.com/tw-in-js/twind/compare/v1.0.0-next.38...v1.0.0-next.39
Published by sastan over 2 years ago
All packages have been update to 1.0.0-next.38
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
)
&
) will be treated as selector and each underscore (_
) will be replace by a space (`) ([
811965f4`](https://github.com/tw-in-js/twind/commit/811965f41fcf23fc678b744b4f9a99d87c1f6049))Published by sastan over 2 years ago
'
and "
when using react renderToString (08c66ee8
)unknown[]
used in apply()
, process()
, tw()
, and parse()
(#234) f79c93d2https://github.com/tw-in-js/twind/compare/v0.16.16...v0.16.17
Published by sastan over 2 years ago
a new pre-release is availabe: 1.0.0-next.36
_
eg &_span:underline
; can be combined with other selectors &_h1>span~a:underline
(cbd37a10
)8f1288a0
)--tw-<...>
) from preset-tailwind into core β this allows var hashing without the tailwind preset (ae979d12
)text-decoration-line
(346efc4e
)text-decoration-line
(346efc4e
)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
)
28cbaef5
)Published by sastan over 2 years ago
all packages have been updated to version 1.0.0-next.35
enablePreflight
to disablePreflight
to make it more clear what this option is used for and what its default is (53058c2e
)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 */
})
df5fc751
)98688bcb
)@twind/with-sveltekit
package name (60db0177
)https://github.com/tw-in-js/twind/compare/v0.16.15...v0.16.16
https://github.com/tw-in-js/twind/compare/v0.16.14...v0.16.15
https://github.com/tw-in-js/twind/compare/v0.16.13...v0.16.14
https://github.com/tw-in-js/twind/compare/v0.16.12...v0.16.13
https://github.com/tw-in-js/twind/compare/v0.16.11...v0.16.12
https://github.com/tw-in-js/twind/compare/v0.16.10...v0.16.11
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
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'] |