Tailwind CSS 和 JS 在 GitHub 页面上不工作

Question

Tailwind CSS 和 JavaScript 在我的 GitHub 页面上不起作用。

这是我的 GitHub 页面链接https://slug01.github.io/keep-notes/

https://slug01.github.io/keep-notes/

Answer 1

您可能忘记在 html 内的 head 标签中添加 CDN 链接，将此标签添加到您的 head 标签中，然后您就可以...

<script src="https://cdn.tailwindcss.com"></script>

Answer 2

除了 DCN 链接之外，您在index.html中还有一个<link rel="stylesheet" href="/dest/output.css">

在这个线程中，使用相对路径来引用您的文件，例如<link rel="stylesheet" href="dest/output.css"> 。

或者../dest/...用于您的子页面

Answer 3

实际上，当我在构建网站的过程中使用 Tailwind CDN 是一个很好的方法，起初我努力添加自定义 colors 和 fonts，但在看到这个之后我可以了。

在您的 CDN 链接中使用此代码，试一试

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

然后像这样完成：

<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>

您可以更改颜色和照片，有关更多详细信息，您可以在此处查看教程https://www.92pixels.com/tutorial/how-to-use-customized-tailwind-colors-and-fonts/

Tailwind CSS 和 JS 在 GitHub 页面上不工作

问题描述

3 个解决方案

解决方案1
0 2022-05-15 06:26:17

解决方案2
0 2022-05-15 06:26:24

解决方案3
0 2023-01-13 08:53:05

Tailwind CSS 和 JS 在 GitHub 页面上不工作

问题描述

3 个解决方案

解决方案1 0 2022-05-15 06:26:17

解决方案2 0 2022-05-15 06:26:24

解决方案3 0 2023-01-13 08:53:05

解决方案1
0 2022-05-15 06:26:17

解决方案2
0 2022-05-15 06:26:24

解决方案3
0 2023-01-13 08:53:05