How to Fix Tailwind CSS Not Loading on KaiOS?

resttest

New member
XNullUser
Joined
Jan 18, 2025
Messages
1
Reaction score
0
Points
1
Location
Casablanca
NullCash
8
Hi everyone,

I'm currently working on a small website designed to run on KaiOS devices. I decided to use Tailwind CSS for styling because it's lightweight and easy to customize. However, I’ve run into an issue: the CSS doesn’t seem to load properly on the KaiOS browser.

Here’s what I’ve tried so far:

  1. Added the Tailwind CSS CDN link to the <head> of my HTML file.
  2. Confirmed that Tailwind works fine in desktop browsers (e.g., Chrome, Firefox).
  3. Checked the KaiOS browser compatibility for CSS features.


Code Example:

html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Tailwind on KaiOS</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200 text-center p-4">
<h1 class="text-2xl font-bold text-blue-500">Hello KaiOS!</h1>
<p class="text-gray-600">This is a test for Tailwind CSS.</p>
</body>
</html>

When I test the site on a KaiOS device:

  • The HTML renders, but none of the Tailwind styles seem to apply.
Questions:

  • Does KaiOS have limitations with modern CSS frameworks like Tailwind?
  • Is there a specific version of Tailwind or another lightweight CSS framework I should use instead?
  • Could this issue be related to the way Tailwind generates classes dynamically?
I’d really appreciate it if anyone could point me in the right direction!
 
Top