我开始学习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>
1条答案
按热度按时间sg24os4d1#
你的css文件需要使用
npx tailwindcss -i ./src/style.css -o ./dist/style.css命令进行编译，看起来你没有在做。而且，当你在npm项目中安装tailwind作为依赖项时，你不需要用
<script src="https://cdn.tailwindcss.com"></script>导入tailwind cdn，因为你所有的样式都必须在你的机器上生成。