Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
the smallest, fastest, most feature complete Tailwind-in-JS solution in existence
If you are here then the likelihood is that you using in Tailwind or CSS-in-JS libraries such as styled components, emotion or goober before. These packages have proven overwhelmingly popular and revolutionized web development as we know it.
The purpose of this project is unify these two philosophies and create the smallest, fastest, most feature complete Tailwind-in-JS solution in existence. Embracing the flexibility of CSS-in-JS whilst conforming to the natural constraints of the Tailwind API.
More importantly though, we hope to create a place for likeminded people to discuss issues and share ideas.
If you would like to get started with twind right away then copy paste this code into your favorite sandbox.
⚡️ Alternatively try the live and interactive demo
import { tw } from 'https://cdn.skypack.dev/twind'
document.body.innerHTML = `
<main class="${tw`bg-black text-white`}">
<h1 class="${tw`text-xl`}">This is Tailwind in JS!</h1>
</main>
`
📚 For further instruction on usage please read the documentation!
This project was started by the authors of two similar libraries – oceanwind and beamwind – who chose to collaborate rather than compete with each other in this space. The open source community is full of fragmentation but we wanted to see cohesion here.
Combining efforts has saved us time and resulted in a much more complete and production ready offering. Furthermore we were able to agree on and coin some standards for certain aspects of the implementation, based on all of our learnings; things like parsing input, grouping syntax, prescedence calculation and plugin API.
A lot of developers ask "Why not just use Tailwind?" and our answer is always that you should use Tailwind, it is an absolutely incredible invention! However, if like us you are already building your app in JS using a framework like react, preact, vue or svelte, rather than just static HTML, then compiling Tailwind shorthand just in time (like twind does) rather than ahead of time like with Tailwind and PostCSS, comes with a lot of advantages.
I've wanted to do a CSS-in-JS flavor of Tailwind for over 2 years because of all the neat benefits you get there so it's cool to see projects like this! – @adamwathan
Take the following snippet for example:
import { tw, setup, strict } from 'https://cdn.skypack.dev/twind'
setup({
hash: true, // Hashes all generated class names
mode: strict, // Throw errors for invalid rules instead of logging
theme: {
fontFamily: {
sans: ['Helvetica', 'sans-serif'],
serif: ['Times', 'serif'],
display: ['Baloo', 'sans-serif'],
},
extend: {
colors: { hotpink: '#FF00FF' },
rotate: { 5: '5deg' },
},
},
plugins: {
'scroll-snap': (parts) => ({
'scroll-snap-type': parts.join(' '),
}),
},
})
const app = () => `
<div class='${style.container}'>
<h1 class='${tw`
text(white 4xl)
font(bold sans)
transition-transform
hover:(
rotate-5
scale-150
cursor-pointer
)
`}'>Hello World</h1>
</div>
`
const style = {
container: tw`
h-full
bg-hotpink
md:(bg-purple-500)
lg:(bg-white text-hotpink)
flex
items-center
justify-center
`,
}
document.body.innerHTML = app()
&
keyword allows you to write complex rules (like pseudo elements &::before
and &::after
) that are beyond the scope of inline styles.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. Prior art includes but is not limited to:
FAQs
compiles tailwind like shorthand syntax into css at runtime
The npm package twind receives a total of 7,915 weekly downloads. As such, twind popularity was classified as popular.
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.
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.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.