Comments (6)
I wonder if there is really a use case for this kind of rule definitions?
tw({
sm: 'w-1/2',
md: 'w-1/3',
})
is handy when you are producing HTML from a JSON definition (my use case). I.e. consider the following:
{
"component": "box",
"tw": {
"sm": "w-1/2",
"md": "w-1/3"
}
}
From my point of view, ideally both object notation and template literal syntax are supported. The former is useful for configuration based usage like mine while latter is likely for those that author JSX or some other format.
tw({
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
})
That's a cool example and it would fit my component model as well.
from twind.
is handy when you are producing HTML from a JSON definition (my use case). I.e. consider the following:
{ "component": "box", "tw": { "sm": "w-1/2", "md": "w-1/3" } }
Would this work for you?
{
"component": "box",
"tw": "sm:w-1/2 md:w-1/3"
}
or:
{
"component": "box",
"tw": "w(sm:1/2 md:1/3)"
}
or:
{
"component": "box",
"tw": ["sm:w-1/2", "md:w-1/3)"]
}
or:
{
"component": "box",
"tw": ["sm:(w-1/2 ...)", "md:(w-1/3 ...)"]
}
From my point of view, ideally both object notation and template literal syntax are supported.
If you mean with object notation is tw({ sm: '...', md: '...' })
then this would prevent the CSS object notation. Because we can not distinguish between rule objects and css objects.
tw({ '&::before': { content: '🙁' } '&::after': { content: '😊' } })That's a cool example and it would fit my component model as well.
Cool!
Let's summarize the proposed APIs:
- keep rule object notation and add css helper
tw({
sm: 'w-1/2',
md: 'w-1/3',
})
tw(css({
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
}))
tw`sm:${css({
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
})}`
const smiley = css({
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
})
tw`sm:${smiley}`
- drop rule object notation with (optional)
css
helper - to allow style re-use
tw("sm:w-1/2 md:w-1/3")
tw({
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
})
tw`sm:${{
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
}}`
const smiley = css({
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
})
tw(smiley)
document.body.className = smiley
tw`sm:${smiley}`
Both APIs would still support template literals, strings, inline plugins, and arrays of those.
from twind.
Would this work for you?
{
"component": "box",
"tw": "sm:w-1/2 md:w-1/3"
}
The nice thing about this format is that I can easily produce "sm:w-1/2 md:w-1/3"
from an object if I want to support the object notation I mentioned. Even the other one would be doable as a simple transformation on my side.
Maybe that's the point - if the string format is clear, then it's not a problem build object notation in user space on top of it.
from twind.
This got me thinking...
In both cases we would add a css helper. If we do that and think of the css object as an escape hatch it would be not to bad to write:
tw`sm:${css({
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
})}`
This additionally makes clear that the object is css and is a nicer to read than the current solution with a inline plugin:
tw`sm:${() => ({
'&::before': { content: '🙁' }
'&::after': { content: '😊' }
})}`
The rule object notation would stay. This would mean no API changes and we introduce a css helper.
Can we agree on that? @lukejacksonn
from twind.
Seems pretty low overhead and like you say, it looks nicer and makes it clear that the contents is just CSS. Would be happy to export such a function!
from twind.
fixed with in f4a0325
from twind.
Related Issues (20)
- [Feature]: flex-shrink-* is deprecated HOT 1
- missing data HOT 1
- How to use tailwindcss plugins? HOT 3
- Is there a way to make tailwind-scrollbar plugin to work with twind? HOT 3
- [Bug]: keyframes added with injectGlobal only contain the last keyframe HOT 2
- [Bug]: Classes added with injectGlobal can't reference each other with @apply HOT 2
- [Bug]: Classes added with injectGlobal can't be used with variants HOT 2
- [Feature]: allow peer dep of typescript v5 HOT 2
- [Bug]: max-w-{number} does not work
- defineConfig / setup mixed up[Docs]:
- Template literals like className={tw`bg-green-${c}`}
- How to style host and slot elements with Lit HOT 2
- [Docs]: twind.dev is out of date and still seems active HOT 1
- [Feature]: support vars in square brackts
- [Bug]: How to extend theme in Tailwind v3.4 HOT 2
- Browser version doesn't work (non-ES module version) HOT 7
- Applying classes on Lit element CSS block HOT 1
- [Bug]: withTwind doesn't play nicely with Light DOM Lit elements
- [Bug]: Lit & Dark Mode not usable with "class" mode HOT 1
- [Bug]: Update typescript version to 5.x.x HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twind.