初学-tailwindcss

已于 2023-03-17 16:03:28 修改
阅读量430 收藏 2
点赞数
分类专栏： 前端 文章标签： css html javascript
于 2023-03-17 16:02:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45955832/article/details/129622514
版权

tailwindcss

无需离开您的HTML，即可快速建立现代网站。

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

在这里插入图片描述

开始使用 确保你安装了 node

$ npm install tailwindcss

简单使用

在 vscode 新建一个项目

npx tailwindcss init

会得到 tailwind.config.js 这个文件

在这里插入图片描述

接下来我们需要添加模板路径（tailwind 的应用范围） 在 tailwind.config.js 文件中的 content 选项下
在这里插入图片描述

是指 build 文件夹下的所有 后缀为 html 的 文件

创建 style.css 文件 配置 导入 tailwind 的基础指令组件
在这里插入图片描述

执行 npx tailwindcss -i ./style.css -o ./build/css/style.css

npx tailwindcss -i ./style.css -o ./build/css/style.css

编译 style.css 输出 ./build/css/style.css 会生成 tailwindcss的基本样式

在这里插入图片描述

之后在 index.html 中引入 就可以了

在这里插入图片描述

！ 由于每次编写代码之后 都要再编译一次

npx tailwindcss -i ./style.css -o ./build/css/style.css

可以执行以下代码 --watch 就是说代码每次变化后都自动执行 **类似 live server **

npx tailwindcss -i ./style.css -o ./build/css/style.css --watch

试验 一下

tailwindcss 官网上的案例

<!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" />
    <!-- 引入 tailwindcss -->
    <link rel="stylesheet" href="css/style.css" />
    <title>tailwind</title>
  </head>
  <body>
    <ul class="space-y-2">
      <li>
        <ul class="grid grid-cols-10 h-7">
          <li class="bg-red-50"></li>
          <li class="bg-red-100"></li>
          <li class="bg-red-200"></li>
          <li class="bg-red-300"></li>
          <li class="bg-red-400"></li>
          <li class="bg-red-500"></li>
          <li class="bg-red-600"></li>
          <li class="bg-red-700"></li>
          <li class="bg-red-800"></li>
          <li class="bg-red-900"></li>
        </ul>
      </li>
      <li>
        <ul class="grid grid-cols-10 h-7">
          <li class="bg-yellow-50"></li>
          <li class="bg-yellow-100"></li>
          <li class="bg-yellow-200"></li>
          <li class="bg-yellow-300"></li>
          <li class="bg-yellow-400"></li>
          <li class="bg-yellow-500"></li>
          <li class="bg-yellow-600"></li>
          <li class="bg-yellow-700"></li>
          <li class="bg-yellow-800"></li>
          <li class="bg-yellow-900"></li>
        </ul>
      </li>
      <li>
        <ul class="grid grid-cols-10 h-7">
          <li class="bg-green-50"></li>
          <li class="bg-green-100"></li>
          <li class="bg-green-200"></li>
          <li class="bg-green-300"></li>
          <li class="bg-green-400"></li>
          <li class="bg-green-500"></li>
          <li class="bg-green-600"></li>
          <li class="bg-green-700"></li>
          <li class="bg-green-800"></li>
          <li class="bg-green-900"></li>
        </ul>
      </li>
      <li>
        <ul class="grid grid-cols-10 h-7">
          <li class="bg-blue-50"></li>
          <li class="bg-blue-100"></li>
          <li class="bg-blue-200"></li>
          <li class="bg-blue-300"></li>
          <li class="bg-blue-400"></li>
          <li class="bg-blue-500"></li>
          <li class="bg-blue-600"></li>
          <li class="bg-blue-700"></li>
          <li class="bg-blue-800"></li>
          <li class="bg-blue-900"></li>
        </ul>
      </li>
      <li>
        <ul class="grid grid-cols-10 h-7">
          <li class="bg-purple-50"></li>
          <li class="bg-purple-100"></li>
          <li class="bg-purple-200"></li>
          <li class="bg-purple-300"></li>
          <li class="bg-purple-400"></li>
          <li class="bg-purple-500"></li>
          <li class="bg-purple-600"></li>
          <li class="bg-purple-700"></li>
          <li class="bg-purple-800"></li>
          <li class="bg-purple-900"></li>
        </ul>
      </li>
      <li>
        <ul class="grid grid-cols-10 h-7">
          <li class="bg-pink-50"></li>
          <li class="bg-pink-100"></li>
          <li class="bg-pink-200"></li>
          <li class="bg-pink-300"></li>
          <li class="bg-pink-400"></li>
          <li class="bg-pink-500"></li>
          <li class="bg-pink-600"></li>
          <li class="bg-pink-700"></li>
          <li class="bg-pink-800"></li>
          <li class="bg-pink-900"></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

得到该效果

在这里插入图片描述

在项目中 使用

1.安装 tailwindcss

npm install -D tailwindcss postcss autoprefixer

2.初始化 tailwindcss

npx tailwindcss init

3.在 tailwind.config.js 中 content 输入 需要 编译 tailwind 的应用范围

4. 在input.css中

@tailwind base;

@tailwind components;

@tailwind utilities;

tailwindcss

npx tailwindcss init

3.在 tailwind.config.js 中 content 输入 需要 编译 tailwind 的应用范围

4. 在input.css中

@tailwind base;

@tailwind components;

@tailwind utilities;

5.引入编译后的style.css

完整项目
tailwindcss

哈哈的哈哈哈haha
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css原子化的框架Tailwindcss的使用教程(原始html和vue项目的安装与配置)
weixin_68658847的博客
12-28 1216
css原子化的框架Tailwindcss的使用教程(原始html和vue项目的安装与配置)
Vue3 - 超详细引入 tailwindcss 及使用教程，安装配置 tailwindcss 框架到项目中的详细步骤流程教学（附带 VScode 编辑器智能提示语法插件 / 个性化配置方法）
王佳斌
09-07 5336
vue3 tailwindcss，vue3引入使用tailwindcss，vue3 vite项目引入tailwindcss详细教程，vue3 tailwindcss的使用教程，vue3 tailwindcss的使用，vue3如何引入tailwindcss，vue3引入tailwindcss报错怎么办，在vue3项目中使用tailwindcss框架插件，Vue3如何使用并设置Tailwind CSS，vue3 tailwindcss怎么在vscode中进行语法提示，vscode安装什么插件能提示tailwin
nextjs-tailwindcss:nextjs + tailwindcss模板
04-14
nextjs-tailwindcss模板 next.js模板包括tailwindcss，检查出的分支，如果你需要在风格，JSX @apply规则支持。 特征 包括尾风 包括postcss-preset-env 现在在生产版本上使用tailwindcss 1.4.x清除方法 用法 克隆此仓库 npm安装 npm run dev 笔记 styles / main.css styles / main.css文件包含tailwindcss导入，还支持全局样式。 它由postcss处理，并与postcss-preset-env一起支持嵌套和其他有趣的东西。 postcss.config.js postcss的配置文件。 tailwind.config.js您应该知道该文件，它是使用npx tailwindcss init生成的默认配置。 这是您的tailwindcss配置所在的位置。 pa
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
最新发布
weixin_49256908的博客
04-24 325
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
tailwind css 的使用
m0_52102284的博客
04-12 719
地址：Installation - Tailwind CSShttps://tailwindcss.com/docs/installation 是 命令的一个子命令，用于初始化新的 Tailwind CSS 项目。运行 命令会生成一个初始的 Tailwind CSS 配置文件（通常是 ），该文件包含了一些默认配置，如颜色、字体、间距等。你可以在生成的配置文件中根据项目需求进行定制和修改。总而言之， 命令的作用是在当前项目中初始化一个新的 Tailwind CSS 配置文件，为项目提供默认的配置。2.配置
vscode前端项目使用Tailwind CSS开发必备技能，5分钟快速上手
04-13 1588
Tailwind CSS IntelliSense 是一款功能强大的工具，可以帮助开发者更快、更高效地编写代码。该工具可以实时提供 Tailwind CSS 类的建议，减少错误，提高代码质量。通过使用 IntelliSense，开发者可以提高生产力，减少学习曲线，并提高应用程序的可访问性。如果你是一名使用 Tailwind CSS 的开发者，请务必充分利用这一强大的功能。
tailwind-boilerplate:快速入门，可帮助您开始使用TailwindCSS
05-12
尾风样板 快速的优化设置，无需任何配置即可启动并运行。 这对于原型很有用。 安装 开始： 克隆存储库： git clone https://github.com/peoray/tailwind-boilerplate.git cd tailwind-boilerplate 安装依赖项： # npm npm install # yarn yarn install 启动开发服务器 # npm npm run serve # yarn yarn run serve 量产 使用和对生产代码进行了优化。 跑步 # npm npm run prod # Yarn yarn run prod 这将在dist/css/main.css创建一个缩小CSS文件。 执照 麻省理工学院
Tailwindcss 入门
weixin_45932157的博客
06-20 740
Tailwindcss 是一个功能类优先的 CSS 框架，通过 flex, pt-4, text-center 和 rotate-90 这种原子类组合快速构建网站，而不需要离开你的 HTML。它与常规的 Bootstrap、Bulma 和 Material UI 不同之处在于没有提供预设的组件，比如：按钮、菜单和面包屑等。我们这里使用的是 V3 版本的 CDN（不推荐），若想配合构建工具看看官网如何使用的。V2 的 CDN 是引入一个 CSS 文件，而 V3 引入的是一个 script。
TailwindCSS一个实用第一的CSS框架用于快速构建自定义UI
08-08
Tailwind CSS 一个实用第一的CSS框架，用于快速构建自定义UI
tailwindcss.css
gztrljh
11-19 121
也不知是什么鬼，一会儿查资料说jq过时了，一会儿说 某某框架才是目前最牛的。目不暇接。 于是 我对我手上这个JQ 搞出来的 项目 感到了深深的思考。我还在用jq 我是不是不配做web程序员？ 网上有些人是 会vue的极度贬低jq ，用jq熟练的说jq还能一战。 管你们的，毫无意义。 快速完成我的业务，让客户给我转账，比啥都爽 。 ...
tailwindcss.com
04-06
Tailwind CSS文档 Tailwind CSS使用作为其文档。 这是您可以在本地运行项目的方式： 克隆此仓库 git clone https://github.com/tailwindlabs/tailwindcss.com.git 进入项目根目录 cd tailwindcss.com 安装JS依赖项 yarn 启动开发服务器 yarn dev
tailwindcss：实用程序优先CSS框架，用于快速UI开发
02-05
实用程序优先CSS框架，用于快速构建自定义用户界面。 文献资料 有关完整文档，请访问 。 社区 要寻求帮助，请讨论最佳做法，或从可搜索内容中受益的任何其他对话： 对于使用该框架与其他人进行闲聊： 贡献 如果您有兴趣为Tailwind CSS做出贡献，请在提交请求之前阅读我们的。
wordpress-tailwind:基于 HTML5Blank 的 Wordpress + TailwindCSS Starter 使用 Laravel Mix
05-30
TailwindCSS Wordpress 初学者 使用 TailwindCSS 和 Laravel Mix 的扩展。 在我的博客上，您可以阅读有关。 安装 使用 NPM： npm install npm run watch 用纱线： yarn yarn watch 您可以交替运行dev以生成可读...
gatsby-tailwind-emotion-starter:使用TailwindCSS 1.8+和Emotion的Gatsby初学者
03-09
尾风CSS :plus: 盖茨比情感启动器使用适用于Gatsby的Tailwind CSS + Emotion入门工具启动您的项目。 该入门工具附带了您需要在下一个Tailwind CSS项目上开始运行的软件包和配置文件。 :memo: 笔记安德鲁·韦尔奇...
gatsby-starter-tailwind:使用Tailwind CSS样式的Gatsby初学者
04-29
使用Tailwind CSS的内置清除选项删除未使用CSS。 插图。 查看演示。 什么是Tailwind CSS？ “ Tailwind CSS是一种实用程序优先CSS框架，用于快速构建自定义用户界面。” – 什么是盖茨比？ “ Gatsby是基于...
vite-react-tailwind-starter:初学者使用Vite + React + Tailwind CSS 2
04-29
安装@tailwindcss/ui ： yarn add @tailwindcss/ui 将插件添加到tailwind.config.js无需进行其他任何更改： // tailwind.config.js module . exports = { // ... // rest of the config plugins : [ require ...
Nuxt-StoryBook-TailwindCSS-Jit:我的样板Nuxt +故事书+ TailwindCSS Jit
03-25
Nuxt +故事书+ Tailwind Jit 进展中的样板配置，例如Nuxt + Storybook + Tailwind jit 。 .mdx中的故事我不知道这是否是完美的方法（我是初学者），但是对于我需要的它还是有效的...构建设置# install dependencies$...
msp-exp432初学者
07-28
MSP-EXP432是德州仪器（TI）提供的一款开发工具，用于学习和练习如何使用他们的MSP432微控制器。MSP432是MSP430系列的升级版本，具有更高的性能和更多的功能。与MSP430一样，学习如何使用MSP432微控制器将成为您的强大工具，因为TI提供了丰富的MCU可供选择，并且价格具有竞争力。您可以使用MSP-EXP432开发板进行编程和调试，无需额外的硬件。您可以从TI官方网站下载MSP432芯片的数据手册、用户指南和示例代码，以帮助您更好地了解和使用MSP-EXP432开发板。 #### 引用[.reference_title] - *1* *2* [使用Code Composer Studio开发MSP430入门指南 - 闪烁LED](https://blog.csdn.net/woshi_ziyu/article/details/81325899)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [从零开始的MSP430单片机学习（一）](https://blog.csdn.net/always_one/article/details/115450456)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值