Browser version doesn't work (non-ES module version) #509
Comments
guiprav2
added
the
📚 Documentation
|
This is how I do it... no errors: <!doctype html>
<html lang="en" class="bg-transparent antialiased">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Foo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=overlays-content" />
</head>
<body class="bg-gray-50 text-gray-700 !block" style="display: none;">
<div id="app" class="min-h-screen flex-(& col) divide-(y gray-500/25)" x-cloak>
<header class="py-8 px-4 w-full flex-none">
<div class="mx-auto w-full max-w-7xl">...</div>
</header>
<main class="px-4 py-8 w-full flex-1">
<section class="mx-auto w-full max-w-7xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa metus, tempus sit amet rhoncus nec, suscipit et ligula. Donec in sem libero, quis dapibus nisi. Nunc bibendum ultrices tellus sed molestie. Donec venenatis, quam non fringilla congue, nisl nisl eleifend nibh, et pellentesque lorem turpis et erat. Nulla ac nisi odio, in rhoncus urna. Duis congue urna lorem, et auctor tellus. Phasellus eleifend varius rhoncus. In hac habitasse platea dictumst. Quisque nec tincidunt neque. Proin vitae tortor justo. Ut sem turpis, viverra eget tristique sed, accumsan in justo.</p>
</section>
</main>
<footer class="py-8 px-4 w-full flex-none">
<div class="mx-auto w-full max-w-7xl">...</div>
</footer>
</div>
<script type="module">
// twind
import { install, injectGlobal } from 'https://esm.run/@twind/core';
import presetAutoprefix from 'https://esm.run/@twind/preset-autoprefix';
import presetTailwind from 'https://esm.run/@twind/preset-tailwind';
install({
presets: [presetAutoprefix(), presetTailwind()],
darkMode: 'class',
hash: false,
theme: {
extend: {
//...
},
},
rules: [
// ...
],
});
// global css
injectGlobal`
@layer base {
[x-cloak] { @apply hidden; }
}
`
</script>
</body>
</html> |
|
Try without import. For this project I can't use ES modules and that's probably where the problem is coming from. |
guiprav2
changed the title
guiprav2
changed the title
|
Try this: <!doctype html>
<html>
<head>
</head>
<body>
<h1 class="underline">Hello!!!</h1>
<script src="https://cdn.twind.style/" crossorigin></script>
<script>
twind.install({
presets: [
twind.presetTailwind(),
twind.presetAutoprefix(),
],
});
</script>
</body>
</html> |
|
That works. I'm using the CDN version now, but the Tailwind documentation seems to indicate it's not recommended in production? From https://tailwindcss.com/docs/installation/play-cdn:
I'm not sure that applies to Twind. What's the difference between those versions anyway? Do you know? Thanks! |
|
If you are not using Twind for its rules and amazing grouping syntax. Then vanilla Tailwind would be ideal. Personally I cannot live without stuff like: // grouping
grid-(& cols-1) md:(grid-cols-4)
after:(w-4 h-4 bg-current opacity-25 rounded-full)
[&:has(:invalid)_[class*='field-error']]:(block visible opacity-100)
// fragments
:class="'bg-'+ item.color +'-400'"If you want to avoid a build system (I totally understand), you could just visit this url: Just grab the code and paste into a js file or a script block in your html and you get all the benefits of Twind without any CDN or build system. You can even include any presets you like in the initial url. Tailwind's play is pretty massive 470K. Twind's is like 13K or something. With Tailwind you get all the latest stuff. Twind hasn't been updated in like 2 year or something. Personally, I don't need a lot of the newer Tailwind stuff. Even if Twind goes under, I'll probably end up switching to Master CSS or UnoCSS over Tailwind and its dumb build requirement. |
|
Damn, I hope Twind regains traction. I'm building a site builder entirely around Tailwind classes (https://webfoundry.app), but since it all runs in the browser Tailwind's build system is a non-starter. Hopefully it's not too hard to add new stuff to Twind using config |
|
Even if development ends (which it looks like it already has), you will still be able to extend it and do stuff like: <p class="print:([text-wrap:pretty])">...to add new CSS rules even before they are added to vanilla Tailwind. The only reason to update the current Twind is to add parity syntax support with Tailwind. It's not truly necessary IMO. I plan on using it until browsers stop supporting the Js. |
Documentation Is:
Not Sure?
Link to relevant page or pages
Please Explain in Detail...
If I create a blank page with the following HTML, I don't see an underline under the h1:
Additionally, if I try the version with presets I get a console error:
The error message says:
Your Proposal for Changes
I don't know, it should work, right?
Alternatives considered
No response
The text was updated successfully, but these errors were encountered: