How can I use this everywhere?
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>
#How can I use a script
short cedar
tame salmonBOT
Hi @short cedar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To use the script
<script src="<https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1"> type="module"></script>
everywhere in your Astro project, you have a few options depending on your needs:
1. Add the Script to Every Page Manually
You can include the <script> tag in each page or layout component where you want it to be available. For example, add it to your main layout component so it is included on all pages that use this layout:
---
// src/layouts/Layout.astro
---
<html>
<head>
<script src="<https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1"> type="module"></script>
</head>
<body>
<slot />
</body>
</html>
This ensures the script is loaded on every page that uses this layout.
2. Use an Astro Integration to Inject the Script Globally
If you want to inject the script into every page automatically, you can use the injectScript() option in an Astro integration. For example, in your custom integration:
export default function myIntegration() {
return {
name: 'inject-tailwindplus-elements',
hooks: {
'astro:config:setup': ({ injectScript }) => {
injectScript(
'head-inline',
`<script src="<https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1"> type="module"></script>`
);
}
}
}
}
This will inject the script into the <head> of every page. Note that scripts injected with "head-inline" are not optimized or resolved by Vite, but for a CDN script like this, that's usually fine Astro Integration API: injectScript().
Summary:
- For most use cases, add the
<script>tag to your main layout. - For advanced/global injection, use an integration with
injectScript().