25 02 11

开始使用TailwindCSS4.x新建一个项目
开始使用TailwindCSS4.x新建一个项目

tailwindcss 4.0已经正式发布。安装方式也有一些改变，步骤简单了不少。虽然官方也有安装说明，但是感觉不太适合我，所以自己微调了下，用本文做个记录。安装 Tailwind CSStailwindcss 通过 npm 安装。npm install tailwindcss @tailwindcss/cli将 Tailwind 指令添加到您的 CSS创建一个css文件，位置随意，比如src/main.css,并且将内容修改为如下：@import "tailwindcss";开始在您的 HTML 中使用 Tailwind将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind 来设置您的内容样式。<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...

22 06 10

如何开始使用TailwindCSS新建一个项目
如何开始使用TailwindCSS新建一个项目

tailwindcss 3.0已经正式发布。安装方式也有一些改变。此贴将对3.0的安装方式做一些说明。安装 Tailwind CSStailwindcss 通过 npm 安装，并创建您的 tailwind.config.js 文件。npm install -D tailwindcss npx tailwindcss init配置您的模板路径在 tailwind.config.js 文件中添加所有模板文件的路径。module.exports = { content: ["./src/**/*."], theme: { extend: , }, plugins: [], }将 Tailwind 指令添加到您的 CSS创建一个css文件，位置随意，比如src/main.css,并且将内容修改为如下：@tailwind base; @tailwind components; @tailwind utilities;开始在您的 HTML 中使用 Tailwind将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind...