当我按照文档在这里添加自定义css https://tailwindcss.com/docs/installation/play-cdn时，它正在工作。我的工作示例:https://codepen.io/monkeycrane2010/pen/PodvGYd
代码<style type="text/tailwindcss">
@layer components {
.card {
@apply bg-slate-200 border-4;
}
}
</style>
<div class="grid grid-cols-2 gap-3">
<h1 class="p-2 bg-slate-200">
Hello world!
</h1>
</div>
<div class="grid grid-cols-4 gap-4">
<div class="card border-t-purple-500"><img src="https://images.unsplash.com/photo-1591886891704-8f84fe0c42f0?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODAxNzg4OTI&ixlib=rb-4.0.3&q=85" alt="apple from Unsplash" width="60" height="60">01 <br/> <a href="https://google.com" target="_blank">Open Link</a></div>
<div class="card border-t-orange-500"><img src="https://images.unsplash.com/photo-1652441547536-f6edb2fc5206?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODAxNzg5NDc&ixlib=rb-4.0.3&q=85" alt="rubber duckie from Unsplash" width="60" height="60">02</div>
<div class="card border-b-green-500">03</div>
<div class="card">04</div>
<div class="card">05</div>
<div class="card">06</div>
<!-- ... -->
<div>09</div>
</div>
但是，我不明白如何将这些代码移动到外部css文件
提前感谢!
- 您需要创建第一个安装设置，即Tailwind CLI命令。你可以参考这个网站的设置步骤:- https://tailwindcss.com/docs/installation然后选择第一个选项:- Tailwind CLI
下面是生成代码的指导设置步骤。
第一步:1)npm install -D tailwindcss2)npx tailwindcss init
- 生成node-module和tailwind.config.js文件
-
但是在tailwind.config.js文件中你需要添加源内容(路径目录):它将被模块所取代。内容:出口("*","/index.html"],
-
你需要创建一个名为src的文件夹在这个文件夹中创建一个名为input.css的新文件
目录:
src
input.css
- 在Input.css文件中添加@tailwind基地;@tailwind组件;@tailwind;
/your code/
@layer components {
.card {
@apply bg-slate-200 border-4;
}
}
运行以下命令扫描文件中的类。当你第一次开始编码的时候，你输入这个命令，否则没有反映CSS的变化，当你添加它。NPX tailwindcss -i ./src/input.css -o ./dist/output.css——watch
在浏览器中打开index.html文件，运行预览
Install tailwindcss via npm, and create your tailwind.config.js file.
npm install -D tailwindcss
npx tailwindcss init
Add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Add your compiled CSS file to the <head> and start
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>