Tailwind CSS 小案例，创建漂亮的购物车卡片

最新推荐文章于 2024-05-20 09:35:10 发布

前端达人

最新推荐文章于 2024-05-20 09:35:10 发布

阅读量588

点赞数

文章标签： css javascript 前端 html html5

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/129575740

版权

转载说明：原创不易，未经授权，谢绝任何形式的转载

我们都或多或少接触过或使用过购物车组件。它被用于电子商务网站，或者在网站上购买特定产品时（例如电子书、在线课程等）。购物车组件可以让您将购物物品添加到购物车中。您还可以添加给定产品的详细信息，例如标题、描述、价格、可用性等等。客户可以清楚地了解产品是什么、价格多少，确认后进一步购买该产品。让我们来看看如何构建一个漂亮的购物车卡片组件。

首先使用NPM的方式安装 TailwindCSS

原文并没有提及安装方式，我也尝试了官网的建议，也没有达到理想的效果，只能自己在那折腾，现在把安装过程分享给大家。

1、首先建立项目文件夹，初始化项目

mkdir demo
cd demo
npm init -y

2、接下来在项目的文件夹里安装相关依赖

npm install tailwindcss postcss-cli autoprefixer postcss-cli

3、接下来在项目文件夹里新建如下文件夹和文件

mkdir dist
cd dist
mkdir css
cd css
touch styles.css
cd ../
touch index.html

4、在此文件夹中创建一个新的Tailwind CSS配置文件：

npx tailwindcss init

这将在项目根目录创建一个名为“tailwind.config.js”的文件，其中包含一些默认配置，我们需要修改content的内容，如下所示：

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

5、接下来我们在项目的根目里新建个 tailwind.css 文件，文件名你可以随意

touch tailwind.css

然后在空白的文件里，添加如下代码：

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

6、最后回到 index.html 文件，编写如下代码，注意CSS的引用。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-red-500 flex items-center justify-center min-h-screen">
<h1 class="text-3xl text-white ">欢迎来到前端达人</h1>
</body>
</html>

7、最后配置 package.json 文件，主要是这部分的修改

"scripts": {
    "build": "postcss tailwind.css -o dist/css/styles.css",
    "watch": "postcss tailwind.css -o dist/css/styles.css --watch"
  }

8、最后运行 npm run build ，打开index.html ，一切正常的话就会看到如下效果。

了解需求任务

凭借您敏锐的眼光和专注，我相

最低0.47元/天解锁文章

前端达人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Tailwind CSS 小案例，创建漂亮的购物车卡片

转载说明：原创不易，未经授权，谢绝任何形式的转载我们都或多或少接触过或使用过购物车组件。它被用于电子商务网站，或者在网站上购买特定产品时（例如电子书、在线课程等）。购物车组件可以让您将购物物品添加到购物车中。您还可以添加给定产品的详细信息，例如标题、描述、价格、可用性等等。客户可以清楚地了解产品是什么、价格多少，确认后进一步购买该产品。让我们来看看如何构建一个漂亮的购物车卡片组件。首先使用NPM的...
复制链接

扫一扫