从头开始设置 Tailwind CSS 项目

5 阅读 0 评论 0 点赞

从头开始设置 tailwind css 项目

tailwind css 因其实用性优先的样式设计方法而成为开发人员的热门选择。它提供了一种高度可定制且高效的方法来设计 web 应用程序，而无需编写自定义 css。在本指南中，我们将引导您从头开始设置 tailwind css 项目。

tailwind css 简介

tailwind css 是一个实用程序优先的 css 框架，它提供低级实用程序类来直接在标记中构建自定义设计。与 bootstrap 或 foundation 等传统 css 框架不同，tailwind 不附带预先设计的组件。相反，它提供了一组实用程序类，让您无需离开 html 即可设计组件。

为什么使用 tailwind css？

实用优先方法：允许您直接在 html 中应用样式，减少对自定义 css 的需求。
定制：tailwind 是高度可定制的，允许您覆盖默认设置并创建您独特的设计系统。
响应式设计：tailwind 提供内置响应式设计实用程序，可以轻松创建移动优先设计。
一致性：确保整个应用程序的样式一致。

先决条件

在开始之前，请确保您已安装以下软件：

node.js（v12 或更高版本）
npm（节点包管理器）

可以从官网下载安装node.js和npm。

立即学习“前端免费学习笔记（深入）”；

设置新项目

首先，为您的项目创建一个新目录并导航到其中：

mkdir tailwind-project
cd tailwind-project

登录后复制

接下来，初始化一个新的npm项目：

npm init -y

登录后复制

此命令创建一个 package.json 文件，它将跟踪您的项目依赖项和脚本。

安装 tailwind css

要安装 tailwind css，您需要将其作为依赖项添加到您的项目中。运行以下命令：

npm install tailwindcss

登录后复制

安装 tailwind css 后，您需要创建一个配置文件。该文件将允许您自定义 tailwind css 的默认设置。要生成此文件，请运行：

npx tailwindcss init

登录后复制

此命令会在项目根目录中创建一个 tailwind.config.js 文件。您可以在该文件中自定义 tailwind 设置。

配置 tailwind css

打开tailwind.config.js 文件。您应该看到这样的基本配置：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

登录后复制

内容数组用于指定所有模板文件的路径。这允许 tailwind 在生产中对未使用的样式进行 tree-shake。添加 html 和 javascript 文件的路径：

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

登录后复制登录后复制

此配置告诉 tailwind 在 src 目录内的任何 .html 或 .js 文件中查找类。

创建您的第一个 tailwind css 文件

接下来，创建一个新的 css 文件，您将在其中导入 tailwind 的基础、组件和实用程序样式。创建一个 src 目录并在其中创建一个名为 styles.css 的文件：

mkdir src
touch src/styles.css

登录后复制

打开 styles.css 文件并添加以下导入：

@tailwind base;
@tailwind components;
@tailwind utilities;

登录后复制

这些指令告诉 tailwind 在您的 css 文件中包含其基础、组件和实用程序样式。

构建和观察 css

要编译 css，您需要使用 tailwind cli。将构建脚本添加到您的 package.json 文件中：

"scripts": {
  "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
  "watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}

登录后复制

构建脚本编译您的 src/styles.css 文件并将结果输出到 dist/styles.css。监视脚本执行相同的操作，但继续监视更改并自动重新编译。

要首次编译 css，请运行：

npm run build

登录后复制登录后复制

此命令会使用编译后的 styles.css 文件创建一个 dist 目录。

创建您的第一个 html 文件

现在，在src目录下创建一个index.html文件：

touch src/index.html

登录后复制

打开index.html文件并添加以下样板html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tailwind css project</title>
  <link href="../dist/styles.css" rel="stylesheet">
</head>
<body>
  hello, tailwind css!
</body>
</html>

登录后复制

这个简单的 html 文件包含编译后的 tailwind css 文件并添加样式标题。

要查看您的更改，请在网络浏览器中打开 index.html 文件。

优化生产

当您准备好部署项目时，您将需要优化 css 以进行生产。 tailwind 提供了一个内置工具，用于清除未使用的样式并缩小 css。

要启用此功能，请更新 tailwind.config.js 文件以包含清除选项：

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

登录后复制登录后复制

接下来，安装@full human/postcss-purgecss 和 cssnano：

npm install @fullhuman/postcss-purgecss cssnano

登录后复制

在项目根目录创建 postcss.config.js 文件并添加以下配置：

const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.{html,js}'],
      defaultextractor: content => content.match(/[w-/:]+(?<!:)/g) || [],
    }),
    cssnano({
      preset: 'default',
    }),
  ],
}

登录后复制

此配置使用 purgecss 和 cssnano 设置 postcss，以删除未使用的样式并缩小 css。

最后，更新 package.json 中的构建脚本：

"scripts": {
  "build": "node_env=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}

登录后复制

运行构建脚本来生成优化的 css：

npm run build

登录后复制登录后复制

您的 dist/styles.css 文件现已针对生产进行了优化。

结论

从头开始设置 tailwind css 项目非常简单，并且提供了用于构建自定义设计的强大工具包。通过遵循本指南，您已了解如何安装 tailwind css、配置它并针对生产进行优化。 tailwind 的实用程序优先方法简化了样式设计过程，使您能够专注于构建应用程序。

快乐编码！

以上就是从头开始设置 Tailwind CSS 项目的详细内容，更多请关注慧达安全导航其它相关文章！

免责声明
1、本网站名称：慧达安全导航
2、本站永久网址：https//www.huida178.com/
3、本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务!
4、本站所有资源的属示图片和信息不代表本站的立场!本站只是储蓄平台及搬运
5、下载者禁止在服务器和虚拟机下进行搭建运营，本站所有资源不支持联网运行!只允许调试，参考和研究!!!!
6、未经原版权作者许可禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担!
7、为尊重作者版权，请在下载24小时内删除!请购买原版授权作品，支持你喜欢的作者，谢谢!
8.若资源侵犯了您的合法权益，请持您的版权证书和相关原作品信息来信通知我们！QQ：1247526623我们会及时删除，给您带来的不便，我们深表歉意!
9、如下载链接失效、广告或者压缩包问题请联系站长处理
10、如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入!
11、本站资源售价只是赞助，收取费用仅维持本站的日常运营所需
12、因源码具有可复制性，一经赞助，不得以任何形式退款。
13、本文内容由网友自发贡献和站长收集，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系1247526623@qq.com

转载请注明出处：慧达安全导航 » 从头开始设置 Tailwind CSS 项目

本文分类：css教程
本文标签：无
浏览次数：5 次浏览
发布日期：2024-12-23 11:52:37
本文链接：https://huida178.com/cssjc/109610

上一篇 > 另一个网站重新设计
下一篇 > 博客网站 |第 10 天的网站

从头开始设置 Tailwind CSS 项目