标签搜索

tailwindcss 项目初始化

果氢cdm
2022-02-11 / 0 评论 / 7 阅读 / 正在检测是否收录...

前几天刚看了一下bootstrap后我发现:
组件给你写好拿着就用有什么意思喂(与个人理念不符
正好想起朋友(软盘 呜呜~ 我的软盘 表情 )之前发过的Tailwind框架
好家伙刚打开就感觉非常赏心悦目比那个getbootstrap好看多了(仅仅只是更戳我
好了好了不bb了~

安装运行环境和nodejs的包管理npm

sudo pacman -S nodejs npm 

创建项目目录

mkdir 项目名 

安装Taiwindcss

npm install -D tailwindcss
npx tailwindcss init

在你的项目根目录会有一个 tailwind.config.js文件

修改tailwind.config.js

module.exports = {
//用于tailwind编译
  content: ["路径"],
  theme: {
    extend: {},
  },
  plugins: [],
}

上面路径应该定义为

./   <--本目录
src/  <--之前创建项目时里面存放html和js的文件夹
*.{html,js}通用匹配src里的html和js

随意在项目中创建一个style.css文件

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

然后执行

npm init -y

打开package.json最下方,在script中再次添加一行

完成后的样子

"build": "tailwindcss -i 上方创建的css文件路径 -o 编译好的css路径 --watch"

创建一个html文件通过link将编译好的css路径引入

开始写时终端运行:

npm run build 

最后安装一下vscode开发工具

于是我写了个自适应卡片demo体验了一下,真是绝了!


demo
####源文件

html
css
output.css

0

评论 (0)

取消