Security News
NVD Backlog Tops 20,000 CVEs Awaiting Analysis as NIST Prepares System Updates
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
By Sarah Gooding - Nov 19, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
twind
READ THIS FIRST!
Twind v1 is still in beta. Expect bugs!
Twind v1 is a complete rewrite aiming to be compatible with Tailwind v3 classes
Tailwind right in the browser without any build step.
Bundler Usage
npm i twind@next
import { setup } from 'twind'
// You must call setup atleast once, but can call it multiple times
setup({
/* options */
})
Incase you are not using SSR to inject the pre-computed styles apply the following pattern to prevent FOUC:
<body class="!block" style="display: none">
<!-- ... -->
</body>
CDN Usage
Add this line to your index.html:
<script src="https://cdn.jsdelivr.net/npm/twind@next"></script>
To configure Twind (optional):
<script>
twind.setup({
presets: [
// custom presets...
],
theme: {
extend: {
colors: {
clifford: '#da373d',
},
},
},
rules: [
// custom rules...
],
// ...
})
</script>
By default, @twind/autoprefix and @twind/preset-tailwind will be applied.
CDN Builds
Core
Without any preset:
<script src="https://cdn.jsdelivr.net/npm/twind@next/core.global.js"></script>
Tailwind
With @twind/autoprefix and @twind/preset-tailwind:
<script src="https://cdn.jsdelivr.net/npm/twind@next"></script>
Mini
With @twind/autoprefix and @twind/preset-mini:
<script src="https://cdn.jsdelivr.net/npm/twind@next/mini.global.js"></script>
API
Everything from @twind/core is available.
setup
Can be called as many times as you want.
cx (from @twind/core)
import { cx } from 'twind'
// Set a className
element.className = cx`
underline
/* multi
line
comment
*/
hover:focus:!{
sm:{italic why}
lg:-{px}
-mx-1
}
// Position
!top-1 !-bottom-2
text-{xl black}
`
apply (from @twind/core)
TDB
tw (from @twind/runtime)
TDB
theme (from @twind/runtime)
TDB
FAQs
compiles tailwind like shorthand syntax into css at runtime
We found that twind demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 13 Jan 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Malicious npm Package Exploits WhatsApp Authentication with Remote Kill Switch for File Destruction
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
By Kush Pandya - Nov 15, 2024
Security News
PyPI Introduces Digital Attestations to Strengthen Python Package Security
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
By Sarah Gooding - Nov 15, 2024