-
|
I have a static site project that doesn't really use JS (except where strictly necessary), and I'm using the twind shim during development because it is a no fuss way to get tailwind working (during production static generation I might use The shim works on element classes, however if I want to create an unique style like the following, how can I make it work when using twind/shim? <style>
.btn {
@apply bg-purple-200 p-3 border-2 hover:border-4 hover:opacity-50;
}
</style>twind/shim currently ignores the style tags. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 27 replies
-
|
You can define a plugin for this. There are two ways for static site:
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
<script type="twind-config">
{
"plugins": {
"btn": "bg-purple-200 p-3 border-2 hover:border-4 hover:opacity-50"
}
}
</script>
<button class="btn">Click me</button>
<script type="module">
import { setup } from "https://cdn.skypack.dev/twind/shim"
setup({
plugins: {
btn: "bg-purple-200 p-3 border-2 hover:border-4 hover:opacity-50"
}
})
</script>
<button class="btn">Click me</button> |
Beta Was this translation helpful? Give feedback.
-
|
That works for applying those classes, however when I used the following: It did reset some of my existing styles. For eg., the black left border line on the post listings in https://notes.srid.ca/ vanished entirely, unless I comment out the If I comment out the |
Beta Was this translation helpful? Give feedback.
-
|
Oh, actually. The conflict arises only for CSS styling I defined in the |
Beta Was this translation helpful? Give feedback.
-
|
Wait, but how would you specify |
Beta Was this translation helpful? Give feedback.
-
|
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/combine/npm/twind/twind.umd.min.js,npm/twind/observe/observe.umd.min.js"></script>
<script>
twind.setup(
{
mode: 'silent', // Behave well with semantic UI classes
// Use a function to disable preflight merging
preflight: () => {
return {
// twind/css would work here as well
".otherClass": {
‘@apply': '....',
color: 'red !important',
}
}
}
}
);
twindObserve.observe(document.documentElement)
</script> |
Beta Was this translation helpful? Give feedback.
-
|
I found a workaround. Using more specific selectors (CSS specificity) obviated the need for !important. Voila, https://tribe.srid.ca/@srid/posts/A62qdzCRqf3tdKsONU
Didn't know that was possible, good to know! |
Beta Was this translation helpful? Give feedback.
You can define a plugin for this. There are two ways for static site:
<script type="twind-config">