Tailwind CSS and JS is not working on GitHub page
Question
Tailwind CSS and JavaScript is not working on my GitHub pages.
Here is my GitHub page link https://slug01.github.io/keep-notes/
3 answers
solution1
0 2022-05-15 06:26:17
You probably forget to add CDN link in your head tag inside html add this tag inside your head tag and than you are good to goo...
<script src="https://cdn.tailwindcss.com"></script>
solution2
0 2022-05-15 06:26:24
In addition of the DCN link, you have in your index.html a <link rel="stylesheet" href="/dest/output.css">
As inthis thread , use a relative path to refer to your file, eg <link rel="stylesheet" href="dest/output.css"> .
Or ../dest/... for your sub-pages
solution3
0 2023-01-13 08:53:05
Actually using Tailwind CDN is a great way when I'm in the process of building a website, at first I struggled to add custom colors and fonts, but after seeing this I can.
use this code in your CDN link, give it a try
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
then in the head for complete like this:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Customized Tailwind Colors and Fonts</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class', // or 'media'
theme: {
display: ["group-hover"],
extend: {
fontFamily: {
sans: ['Outfit',],
},
colors:({ colors }) => ({
custom : colors.cyan,
}),
},
},
}
</script>
</head>
You can change the color and the photo, for more details you can see the tutorial here https://www.92pixels.com/tutorial/how-to-use-customized-tailwind-colors-and-fonts/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.