在终端，先进入到你想要保存项目的地方，比如桌面上，创建一个目录，名字可以是 ninghao-tailwind，进入到这个目录的下面。确定我们在系统里已经安装了 node.js ，执行一下 npm init -y ，初始化一个 package.json 文件。

给项目安装一些东西，执行 npm install 安装的是 tailwindcss，postcss，postcss-cli，还有 autoprefixer。把这些东西保存在项目的开发依赖里。

tailwindcss 是我们要用的 css 框架，postcss 是后期处理 css 用的东西，postcss-cli 是 postcss 的命令行工具，autoprefixer 是一个 postcss 插件，它可以自动添加浏览器需要的样式前缀。

tailwind 配置

下面可以再创建一个 tailwind 配置文件，执行一下 npx tailwindcss init，这样会在项目里创建一个 tailwind.config.js，这个文件就是 tailwind 需要用的配置文件。

postcss 配置

用编辑器打开这个项目，在项目根目录的下面，新建一个 postcss 需要的配置文件，比如 postcss.config.js，在里面添加一个配置，module.exports，导出一个对象，里面添加一个 plugins 属性，它是一个对象，里面再添加一个 tailwindcss ，值是一个空白的对象，再添加一个 autoprefixer，对应的值也是一个空白的对象。

这个配置的意思就是给 postcss 添加两个插件，一个是 tailwindcss 还有一个是 autoprefixer。

样式

新建一个样式文件，放在 src 的下面，名字是 tailwind.css， 在里面用 @tailwind 这个指令导入 tailwind 里的几个样式，一个是 base，下面再导入一个 components，然后再导入一个 utilities。

命令

打开项目里的 package.json 这个文件，在 scripts 里面添加一个自定义的命令，名字是 build:css，执行的命令是 ./node_modules/.bin/postcss 源文件是 src/tailwind.css，加上一个 -o 选项，编译之后放在 dist 目录的下面，名字是 tailwind.css。

编译

在终端，项目所在目录的下面，可以执行一下 npm run build:css，这个命令实际上执行的是我们给项目安装的 postcss 这个命令行工具，把 src 目录下面的 tailwind.css 编译好，放在 dist 目录的下面。

在项目里，打开 dist 目录下面的这个编译生成的 tailwind 样式表。

项目

下面我们再创建一个 html 文档，名字是 index.html，在这个文档里添加一个基本的 html 结构，然后在 head 标签里面，链接使用在 dist 目录下面的 tailwind.css 这个样式表。

这样就可以在这个文档里使用 tailwind 这个 css 框架里提供的东西了。

开发工具

然后再准备几个编辑器扩展，打开命令面板，搜索 install 执行安装扩展。可以先安装一下 live server 这个扩展，它可以在本地创建一个可以实时刷新的 web 服务器。

再安装一下 postcss 这个扩展，让编辑器支持使用 postcss 编写的样式。最后再安装一个 tailwind 这个扩展，这样在元素里输入 tailwind 提供的 css 类的时候，会智能提示可以使用的类的名字。

测试

在 index.html 这个文档里可以测试一下，在 body 元素里面，添加一个 div 元素，上面加上几个 tailwind 提供的类。比如 w-96.h-96.m-8.bg-purple-600 。

打开命令面板，搜索 live server，执行 open with live server，这样会在本地创建一个 web 服务器，自动在浏览器上打开当前编辑的这个 html 文档。在页面上你会看到一个紫色的方块。

编辑这个 html 文档，保存以后，可以在浏览器上实时的看到编写之后的结果，比如在这个 div 元素上面添加点圆角效果，添加一个 rounded，如果想让这个圆角大一些，可以添加一个 rounded-lg。