html 顺风版本3.2.4:@apply样式根本不应用

dxxyhpgq  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(123)

我开始学习Tailwind框架通过跟随“从零到生产”系列在他们的官方youtube频道,但我堆叠在@apply它根本不工作和Vscode不断显示我一个警告“未知在rule @apply”.我已经阅读了他们的网站上的文档,一切都很好,没有什么不同.
下面是配置和我的代码:
tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

package.json

{
  "name": "tailwind",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4",
    "vite": "^4.0.0"
  }
}

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply inline-block px-5 py-3 rounded-lg focus:outline-none focus:ring focus:ring-offset-2 uppercase tracking-wider font-semibold text-sm sm:text-base;
  }
  .btn-primary {
    @apply bg-indigo-500 text-white hover:bg-indigo-400 focus:ring-indigo-500 focus:ring-opacity-50 active:bg-indigo-600;
  }
  .btn-secondary {
    @apply bg-gray-300 text-gray-800 hover:bg-gray-200 focus:ring-gray-300 focus:ring-opacity-50 active:bg-gray-400;
  }
}

index.html

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="styleshee" href="style.css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
  </head>
  <body class="bg-gray-600">
    <div class="bg-gray-100 grid lg:grid-cols-2">
        <div class="p-8 py-12 max-w-md mx-auto sm:max-w-xl lg:max-w-full">
            <h3 class="">Workation</h3>
            <img src="./coffee-bg10.jpg"
            class="mt-6 rounded-lg shadow-xl lg:hidden" alt="just an img"/>
            <h1 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 lg:text-4xl">You can work from anywhere.<br>  <span class="text-indigo-500">Take advantage of it.</span></h1>
            <p class="mt-2 text-gray-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. ccusamus repudiandae sapiente. Repepsam laudantium fugiat at unde. Facere, voluptates quidem!</p>
            <div class="mt-6">
              <a href="#" class="inline-block bg-indigo-500 hover:bg-indigo-700 active:translate-y-0.5 transform transition focus:outline-none focus:ring focus:ring-offset-2 focus:ring-indigo-700 text-white text-sm uppercase font-semibold tracking-wider px-5 py-3 rounded-lg shadow-lg">Book your Escape</a>
              <a href="#" class="btn-primary">or here</a>
            </div>
        </div>
          <div class="hidden lg:block relative">
              <img src="./coffee-bg10.jpg"
            class="absolute inset-0 w-full h-full object-cover object-center" alt="just an img"/>
          </div>
    </div>
  </body>
</html>
sg24os4d

sg24os4d1#

你的css文件需要使用npx tailwindcss -i ./src/style.css -o ./dist/style.css命令进行编译,看起来你没有在做。
而且,当你在npm项目中安装tailwind作为依赖项时,你不需要用<script src="https://cdn.tailwindcss.com"></script>导入tailwind cdn,因为你所有的样式都必须在你的机器上生成。

相关问题