JSFiddle - React, Tailwind, and code Playground

by camnpr

HTML

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- this is an example from the MDN Layout Cookbook -->
    <title>CSS Cookbook: sticky footer</title>

    <link rel="stylesheet" href="styles.css" />

  </head>

  <body>
    <section>
      <div class="wrapper">
        <header class="page-header">This is the header</header>
        <main class="page-body">
          <p>
         
          </p>
        </main>
        <footer class="page-footer">Sticky footer</footer>
      </div>
    </section>
  </body>
</html>

CSS

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  height: 100%;
  background-color: #fff;
  color: #333;
  font:
    1.2em / 1.5 Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  padding: 0;
  margin: 0;
}

* {
  box-sizing: inherit;
}

section {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.page-header,
.page-footer {
  background-color: rgb(75 70 74);
  color: #fff;
  padding: 20px;
}

.page-body {
  padding: 20px;
}

JavaScript

解决方案
翻了下该 Issue，有人给出了 bug 的来源 vuejs/language-tools#5018，点进去看看，该 Issue 日期也是新鲜的。

Issue 中也有人给出了解决方法，自己尝试了是可行的。

vue-tsc 版本切换成固定的 2.0.29
typescript 版本切换成固定的 5.6.2

{
  "scripts": {
    "build": "vue-tsc -b && vite build"
  },
  "devDependencies": {
    "vue-tsc": "2.0.29",
    "typescript": "5.6.2",
    "vite": "^5.4.10",
    "@vitejs/plugin-vue": "^5.1.4"
  }
}
最后重新安装依赖即可