TailwindCSS 3.0（一）安装方法

最新推荐文章于 2024-04-24 14:14:21 发布

Solarains

最新推荐文章于 2024-04-24 14:14:21 发布

阅读量2.9k

点赞数 8

分类专栏： tailwind学习笔记文章标签：前端 npm javascript

本文链接：https://blog.csdn.net/u013714697/article/details/122491267

版权

tailwind学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

TailwindCSS 3.0 安装方法

一. CDN方式引入页面
二. 使用Tailwind Cli安装
三. PostCSS方式引入
四. Vue2或Vue3中安装

一. CDN方式引入页面

在html页面的<head>标签中引入<script src="https://cdn.tailwindcss.com"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入标签 -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="m-7 text-3xl font-bold underline">
        Hello world!
    </h1>
</body>
</html>

最终效果

二. 使用Tailwind Cli安装

在项目目录下初始化项目, 然后安装tailwindcss, 并创建tailwind.config.js文件.

# 在项目目录下初始化项目
npm init -y

# 安装tailwindcss
npm install tailwindcss -D

# 创建 tailwind.config.js 文件.
npx tailwindcss init

设置tailwind.config.js文件

// tailwind.config.js
module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

根目录创建main.css文件, 引入tailwindcss命令

/* main.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

打开package.json文件, 在scripts中添加build命令.

{
  "name": "tailwind-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // 添加build
    "build": "npx tailwindcss -i main.css -o ./public/dist/main.css",
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.0.13"
  }
}

创建dist/index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
       <!-- 引入编译后的css文件 -->
    <link rel="stylesheet" href="./dist/main.css">
  
</head>
<body>
	<h1 class="m-7 text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

npm run build

使用live server或者直接在浏览器打开index.html文件即可

三. PostCSS方式引入

使用npm安装talwindcss postcss autoprefixer, 生成tailwind.config.js文件

# 初始化npm项目
npm init --yes

# 安装talwindcss postcss autoprefixer
npm install tailwindcss postcss autoprefixer -D

# 生成tailwind.config.js
npx tailwindcss init

设置tailwind.config.js文件

// tailwind.config.js
module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建postcss.config.js

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

根目录创建main.css文件, 引入tailwindcss命令

/* main.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

打开package.json文件, 在scripts中添加build命令.

{
  "name": "tailwind-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // 添加build
    "build": "postcss main.css -o public/dist/main.css",
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.0.13"
  }
}

创建dist/index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
       <!-- 引入编译后的css文件 -->
    <link rel="stylesheet" href="./dist/main.css">
  
</head>
<body>
	<h1 class="m-7 text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

npm run build

使用live server或者直接在浏览器打开index.html文件即可

四. Vue2或Vue3中安装

使用npm安装talwindcss postcss autoprefixer, 生成tailwind.config.js 和 postcss.config.js 文件

# Vue3
 
# 安装talwindcss postcss autoprefixer
npm install tailwindcss postcss autoprefixer -D

# 生成tailwind.config.js 和 postcss.config.js
npx tailwindcss init -p

注意: 由于最新的tailwind css使用post css 8版本，vue2框架暂时还不支持，所以需要指定安装postcss7的版本.¹

# Vue2 

# 安装talwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 -D

# 生成tailwind.config.js 和 postcss.config.js
npx tailwindcss init -p

设置tailwind.config.js, 将所有模板文件路径放进去

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在src/main.js中引入tailwind

// main.js

// Vue3 
import { createApp } from 'vue'
import App from './App.vue'
import "tailwindcss/tailwind.css";  // Vue3中引入tailwindcss

createApp(App).mount('#app')

// Vue2
import Vue from 'vue'
import App from './App.vue'
import "tailwindcss/tailwind.css"; // Vue2中引入tailwindcss

Vue.config.productionTip = false

new Vue({render: h => h(App)}).$mount('#app')

https://blog.csdn.net/vx_1097122362/article/details/115563641 ↩︎

Solarains

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
TailwindCSS 3.0（一）安装方法

在项目目录下初始化项目, 然后安装tailwindcss, 并创建tailwind.config.js文件.# 在项目目录下初始化项目npm init -y# 安装tailwindcssnpm install tailwindcss -D# 创建 tailwind.config.js 文件.npx tailwindcss init设置tailwind.config.js文件module.exports = { content: ["./public/**/*.{html,.
复制链接

扫一扫