如何使用npm安装并简单使用Tailwindcss

安装Tailwindcss教程

呼，弄了好久终于搞定使用npm安装Tailwindcss啦！

下面分享一下探索中的安装步骤：

1.找到自己项目目录，放置tailwindcss的文件
（我直接在桌面新建了一个Test）

在这里插入图片描述

2.打开终端命令行切换到刚刚新建的文件夹
输入npm init -y出现如下界面

在这里插入图片描述

3.安装tailwindcss的一些库（这里安装tailwindcss、postcss-cli、autoprefixer）
输入npm install tailwindcss postcss-cli autoprefixer
下面这是成功之后的界面

在这里插入图片描述

4.新建一个tailwind.config.js
输入npx tailwind init

在这里插入图片描述

5.新建一个postcss.config,js
内容如下：
module.exports={
plugins:[
    require('tailwindcss'),
    require('autoprefixer'),
]
}

在这里插入图片描述

6.创建一个目录，内含css文件（这里目录名为css，文件名为tailwind.css）
文件中输入以下内容
@tailwind base;
@tailwind components;
@tailwind utilities;
（到此咱们的test项目共包含下列文件/文件夹）

在这里插入图片描述

7.进入package.json文件修改代码
修改前：

在这里插入图片描述

修改后：

在这里插入图片描述

8.返回到终端界面（直接在vscode上打开终端更方便）
输入npm run build
效果如下图

在这里插入图片描述

然后就看到了自动生成了包含tailwind.css的public文件夹

在这里插入图片描述

9.最后就到了引用测试环节啦！这里新建一个index.html
代码如下：
<link>标签中的"href"根据个人情况更改css文件的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="public/tailwind.css">
</head>
<body class="w-full h-screen flex justify-center items-center">
	<div class="w-32 h-32 bg-red-600 rounded-3xl"></div>
</body>
</html>

打开后出现如下图形即测试成功！好好享受tailwindcss吧！加油！！！

在这里插入图片描述

如何使用npm安装并简单使用Tailwindcss

Guess you like