#Issues with including Tailwind-Elements in project

10 messages · Page 1 of 1 (latest)

weary thunder
#

Edit: SOLVED

Hi. Fairly new to Astro and the ecosystem, so running into a few minor issues here while trying to deploy at page that makes use of Tailwind-Elements.

I got the downloaded the package, updated the config after following this process https://tailwind-elements.com/quick-start/. I've developed locally with this script include, per the instructions:

<script src="./node_modules/tw-elements/dist/js/index.min.js"></script>

This works because the file is physically there. However, this path is included when building and node_modules isn't available the dist folder.

One thing I noticed is that when I do an import i get error "document is not defined".
import 'tw-elements';

My question is therefore two-fold:

  • How do I include (import) tw-elements as per the instructions?
  • How do I, in general, Astrologically approach script includes like this? Feels like I might be sidestepping the build bundling or include logic here by referencing the file directly.

Thanks! 🙏🏻

chilly rune
#

You can try putting your import 'tw-elements' inside a <script></script> in your page. This should work because Astro is also scanning, resolving and bundling your script tags if they are not inline.
The reason you´re getting an error when importing the way you did is, because this import and execution will happen server-side wheredocumentdoesn´t exist.

More infos about script tags in Astro: https://docs.astro.build/en/guides/client-side-scripts/#using-script-in-astro

Astro Documentation
Scripts and Event Handling

How to add client-side interactivity to Astro components using native browser JavaScript APIs.

weary thunder
chilly rune
#

Great 👍 Glad I could help

#

Yeah the astro docs are actually pretty great

weary thunder
#

btw, this support "ticket"... am I supposed to close it or mark it resolved?

chilly rune
weary thunder
weary thunder