N
Nuxt•2w ago
Looney

How to use TailwindCSS to style SPA loading template

Is it possible to some how use TailwindCSS classes to style the SPA loading template located in app/spa-loading-template.html? Doesn't seem like the styling is applied even though I have TailwindCSS set up with the module.
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @Looney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, it appears that using TailwindCSS classes directly in the SPA loading template (app/spa-loading-template.html) is not straightforward. The SPA loading template is a plain HTML file, and Tailwind classes are not processed for it during the build process. However, there are a couple of approaches you can consider: 1. Inline CSS: Instead of using Tailwind classes, you can use inline CSS styles in your SPA loading template. This is demonstrated in the Nuxt Configuration documentation, where a custom loader is styled using inline CSS: 
<div class="loader"></div>
<style>
.loader {
  /* inline styles here */
}
</style>
<div class="loader"></div>
<style>
.loader {
  /* inline styles here */
}
</style>
2. Custom CSS: You can write custom CSS that mimics the styles you want to achieve with Tailwind. This would be placed directly in the <style> tag of your SPA loading template. 3. Experimental Feature: Nuxt 3 introduced an experimental feature that allows you to configure the SPA loading template location. By setting spaLoadingTemplateLocation to 'body', you might be able to leverage some global styles. However, this is experimental and may not fully solve the Tailwind integration issue. You can read more about this in the Experimental Features documentation. It's important to note that the SPA loading template is meant to be a simple, lightweight loading indicator that appears before your Nuxt application is fully loaded. For more complex loading states within your application, you might want to consider using Nuxt UI components like USkeleton or UTable with loading state, which fully support Tailwind classes. If you need a more customizable solution with full Tailwind support, you might want to implement the loading state within your Nuxt application itself, rather than relying on the SPA loading template. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@284114506815242240> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?