Installations
npm install @twind/preset-container-queriesReleases
@twind/preset-autoprefix@1.0.7
Published on 24 Jan 2023
@twind/preset-tailwind-forms@1.1.2
Published on 24 Jan 2023
gatsby-plugin-twind@1.1.4
Published on 24 Jan 2023
@twind/preset-radix-ui@1.0.7
Published on 24 Jan 2023
@twind/preset-tailwind@1.1.4
Published on 24 Jan 2023
@twind/with-remix@1.1.4
Published on 24 Jan 2023
Developer
Developer Guide
Module System
ESM
Min. Node Version
>=14.15.0
Typescript Support
Yes
Node Version
18.13.0
NPM Version
8.19.3
Statistics
3,798 Stars
750 Commits
104 Forks
16 Watching
4 Branches
45 Contributors
Updated on 27 Nov 2024
Languages
JavaScript (59.97%)
TypeScript (32.52%)
Svelte (5.66%)
Smarty (1.81%)
HTML (0.05%)
Total Downloads
Cumulative downloads
Total Downloads
95,586
Last day
44%
337
Compared to previous day
Last week
33%
1,739
Compared to previous week
Last month
-17.1%
6,263
Compared to previous month
Last year
201.2%
71,619
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Twind is a small compiler that converts utility classes into CSS at runtime. The goal of this project is to unify the flexibility of CSS-in-JS with the carefully considered constraints of the Tailwind API.
Utility-first CSS without any build step right in the browser or any other environment like Node.js, deno, workers, ...
- 📖 Study the documentation
- 🤖 Try the playground
- 🧭 Explore the examples
- 📓 Consult the API reference
- 📜 Read the changelog
Nov 18, 2022: Twind v1 is now in stable release!
Check out the Migration Guide to upgrade or go to the v0.16 branch.
✨ Features
⚡️ No build step
Get all the benefits of Tailwind without the need for Tailwind, PostCSS, configuration, purging, or autoprefixing.
🚀 Framework agnostic
If your app uses HTML and JavaScript, it should work with Twind. This goes for server-rendered apps too.
😎 One low fixed cost
Twind ships the compiler, not the CSS. This means unlimited styles and variants for one low fixed cost.
Other features
- 🌎 No bundler required: Usable via CDN
- 🎨 Seamless integration with Tailwind
- 🤝 Feature parity with Tailwind v3
- 🎯 Extended variants, rules, and syntax
- 🚓 Escape hatch for arbitrary CSS
- 🤖 Built in support for conditional rule combining
- 🧐 Improved readability with multiline styles and comments
- ❄️ Optional hashing of class names ensuring no conflicts
- 🔩 Flexible: configurable theme, rules and variants
- 🔌 Language extension via presets
- 🎩 No runtime overhead with static extraction
- 🚅 Faster than most CSS-in-JS libraries
- ⚡ Fully tree shakeable: Only take what you want
- 🦾 Type Strong: Written in Typescript
- and more!
📖 Documentation
The full documentation is available at twind.style.
💬 Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable use Github Discussions.
To ask questions and discuss with other Twind users in real time use Discord Chat.
🧱 Contribute
See the Contributing Guide for information on how to contribute to this project.
🌸 Credits
💡 Inspiration
It would be untrue to suggest that the design here is totally original. Other than the founders' initial attempts at implementing such a module (oceanwind and beamwind) we are truly standing on the shoulders of giants.
- Tailwind CSS: created a wonderfully thought out API on which the compiler's grammar was defined.
- styled-components: implemented and popularized the advantages of doing CSS-in-JS.
- htm: a JSX compiler that proved there is merit in doing runtime compilation of DSLs like JSX.
- goober: an impossibly small yet efficient CSS-in-JS implementation that defines critical module features.
- otion: the first CSS-in-JS solution specifically oriented around handling CSS in an atomic fashion.
- clsx: a tiny utility for constructing class name strings conditionally.
- style-vendorizer: essential CSS prefixing helpers in less than 1KB of JavaScript.
- UnoCSS: for the configuration syntax.
- CSSType: providing autocompletion and type checking for CSS properties and values.
🤝 Contributors
Thank you to all the people who have already contributed to twind!
🙏🏾 Sponsors
This project is kindly sponsored by Kenoxa GmbH who support @sastan to maintain this project as part of their open-source engagement.
COPILOT TRAVEL is partnering with @sastan to keep twind aligned with the latest Tailwind CSS releases.
Thank you to all our sponsors!
Please ask your company to also support this open source project by becoming a sponsor on opencollective or GitHub.
⚖️ License
The MIT license governs your use of Twind.
No vulnerabilities found.
Reason
20 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/tw-in-js/twind/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/tw-in-js/twind/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:123: update your workflow using https://app.stepsecurity.io/secureworkflow/tw-in-js/twind/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:172: update your workflow using https://app.stepsecurity.io/secureworkflow/tw-in-js/twind/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-cdn.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/tw-in-js/twind/deploy-cdn.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-mdn.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/tw-in-js/twind/deploy-mdn.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/generate-sponsors.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/tw-in-js/twind/generate-sponsors.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/generate-sponsors.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/tw-in-js/twind/generate-sponsors.yml/main?enable=pin
- Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 4 third-party GitHubAction dependencies pinned
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/ci.yml:29
- Warn: jobLevel 'deployments' permission set to 'write': .github/workflows/ci.yml:31
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/ci.yml:117
- Warn: jobLevel 'deployments' permission set to 'write': .github/workflows/ci.yml:119
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-cdn.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-mdn.yml:1
- Warn: no topLevel permission defined: .github/workflows/generate-sponsors.yml:1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
75 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-p2fh-2h23-6grg
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
- Warn: Project is vulnerable to: GHSA-5p75-vc5g-8rv2
- Warn: Project is vulnerable to: GHSA-gv7g-x59x-wf8f
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c6f8-8r25-c4gc
- Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-96g7-g7g9-jxw8
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
- Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc
- Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-h755-8qp9-cq85
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-5r9g-qh6m-jxff
- Warn: Project is vulnerable to: GHSA-r6ch-mqf9-qc9w
- Warn: Project is vulnerable to: GHSA-wqq4-5wpv-mx2g
- Warn: Project is vulnerable to: GHSA-3787-6prv-h9w3
- Warn: Project is vulnerable to: GHSA-9qxr-qj54-h672
- Warn: Project is vulnerable to: GHSA-m4v8-wqvr-p9f7
- Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-7jxr-cg7f-gpgv
- Warn: Project is vulnerable to: GHSA-xj72-wvfv-8985
- Warn: Project is vulnerable to: GHSA-ch3r-j5x3-6q2m
- Warn: Project is vulnerable to: GHSA-p5gc-c584-jj6v
- Warn: Project is vulnerable to: GHSA-whpj-8f3w-67p5
- Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5
- Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-8c93-4hch-xgxp
- Warn: Project is vulnerable to: GHSA-f8mp-x433-5wpf
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-m95q-7qp3-xv42
Score
3.9
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More