Comments (14)
That’s kind of what I figured. The style
function proposed by @sastan seems like a nice, easy way to get a limited version of Twind via inline styles. I can’t imagine it could get much easier than this:
<p id="title">
Hello, friend.
</p>
<script type="module">
import { tw } from 'https://cdn.skypack.dev/twind';
const el = document.getElementById("title");
el.style = tw.style`text(blue-500 uppercase) p-2`;
</script>
I’m sure there are a plenty of considerations and challenges that I haven’t thought of but it seems like a neat idea.
from twind.
@mattrossman That makes things easier for us.
Something like the following should work already:
- uses twind SSR to render the app (optional with shim)
- uses the inline-css package to adjust the html
- Profit
Based on a react app:
import { renderToString } from 'react-dom/server'
import inlineCss from 'inline-css'
import { setup } from 'twind'
import { virtualSheet, getStyleTag } from 'twind/sheets'
import App from './app'
const sheet = virtualSheet()
setup({ ...sharedOptions, sheet })
function ssr() {
// 1. Reset the sheet for a new rendering
sheet.reset()
// 2. Render the app
const body = renderToString(<App />)
// 3. Create the style tag with all generated CSS rules
const styleTag = getStyleTag(sheet)
// 4. Generate the html
const html = `<!DOCTYPE html>
<html lang="en">
<head>${styleTag}</head>
<body>${body}</body>
</html>
`
// 5. Inline the CSS – returns a Promise
return inlineCss(html, { /* options */ })
}
If this works it is an extension to the existing SSR examples (incl the shim) as only the last line is specific to email. We could add a recipe or ad it to the FAQs.
from twind.
For the apply
function we have added context.css
(https://twind.dev/api/interfaces/twind.context.html#css) which extracts all CSS rules. Something like this may work:
let rules
tw(({ css }) => {
rules = css('text-center')
/// rules = css([apply`...`, 'text-center text-xl', css`...`])
return ''
})
// => rules = { textAlign: center }
Then we need to convert the object to styles (hyphenate, and some other stuff). The functionality is already internally available.
Maybe we could define a new module (twind/style) to do that.
from twind.
I found a similar issue discussed on the styled-components repo, which pointed to tools like inline-stylesheet
or inline-css
for solving this. It looks like for the latter, it would be straightforward to convert a document rendered with getStyleTag
into inline style strings.
from twind.
With #101 in place we could expose the css context as tw.style
or tw.css
.
tw.style`text(center white) bg-black`
// => { align: "center", color: "#fff", ...}
@tw-in-js/contributors Thoughts?
from twind.
I don't know enough about this problem/ use case, but that seems really nice for those who might need it. I might lean towards style
simply because that is most likely the attribute that you would apply it. I would expect css
would generate valid CSS syntax.
I wonder if it is possible, or useful, to optionally generate the styles in raw format: text-align:center; color: #fff;
?
from twind.
The raw variant is the idea behind this issue.
I was thinking to use twind for styling email templates, but than I'd need to end up with inline styles, in string format.
<div style="text-align: center; color: #fff;">
hi
</div>
from twind.
@smeijer Do you want to use this feature for https://github.com/rakered/rakered/tree/main/packages/email?
I agree that tw.style
should return an CSS Style object. That means only properties.
What do we do about child selectors, pseudo classes, global styles? The only reasonable approach I see is to throw an error because we can not add a class or something like that.
from twind.
That was the idea indeed. That way I could clean up this mess: https://github.com/rakered/rakered/blob/main/packages/email/src/templates/themes/default.ts 😬.
Some things would indeed not be possible, that's why I mentioned:
Things that are unsupported (like media queries) could still go to the head style sheet for those clients that do support it.
IF this is something that you'd want to support, the inline style support would be very basic. Some things won't be supported, or would still end up in the head > style
. Think media queries, but indeed also pseudo-classes and child selectors.
So I think that's a decision that should be made first. Not everything can end up in the style=<string>
tag, so does this match the product? Is it worth it to create a twind/email
package for it? (email styling is associated with basic and shitty css), or should we just really not want to go that way? (Totally understand if that's the case!)
from twind.
After thinking about tw.style
I do not really see a use case for it that warrants it be included in the twind module. It has so many implications and things that can not work. Is there a case where style
would be preferred over class
?
A separate module like twind/email
may be the way to go.
After looking at Email Client CSS Support head > style
, except for Gmail App, seems to have good support.
@smeijer Wouldn't the getStyleTag
(optional with shim) be enough? What am I missing?
from twind.
except for Gmail App, seems to have good support.
Unfortunately, that's a big one 😞
Yes, the getStyleTag
would definitely be useful! I'm working on an edge case here, so don't spend too much time on it!
What would it look like when using it together with the shim?
from twind.
@smeijer Does the example work as you want it? Then I would add a section to the docs and close this one.
from twind.
@sastan, I just tried it, and the output is sufficient for my needs! Thanks.
Just good to know, the non-supported classes don't seem to end up in head > style
.
https://runkit.com/smeijer/twind-inline-styles
from twind.
Documentation will be added via #125
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.