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

安装Tailwindcss教程

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

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

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

在这里插入图片描述

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

如何使用npm安装并简单使用Tailwindcss_第1张图片

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

如何使用npm安装并简单使用Tailwindcss_第2张图片

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

如何使用npm安装并简单使用Tailwindcss_第3张图片
如何使用npm安装并简单使用Tailwindcss_第4张图片

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

如何使用npm安装并简单使用Tailwindcss_第5张图片

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

如何使用npm安装并简单使用Tailwindcss_第6张图片

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

如何使用npm安装并简单使用Tailwindcss_第7张图片

修改后:

如何使用npm安装并简单使用Tailwindcss_第8张图片

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

如何使用npm安装并简单使用Tailwindcss_第9张图片

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

如何使用npm安装并简单使用Tailwindcss_第10张图片

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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_第11张图片

你可能感兴趣的:(前端)