堆友是一个由 Alibaba Design 打造的 3D 资源设计平台,提供了海量的高品质的 3D 素材和。堆友致力于帮助设计师在任何时候都能轻松获取高质量的 3D 素材资源。
免费!免费!免费!重要的事情说三遍
![Alt text](https://shaxutang-static.netlify.app//ddesign_home.webp)
平台资源
在堆友平台上,设计师可以找到海量的高品质3D素材和模板,包括场景、道具、角色、动画等,这些素材资源都经过了严格的筛选和审核,确保其高质量和可用性。同时,堆友还提供了一系列的设计工具和功能,如智能搜索、分类推荐、素材替换、快速预览等,帮助设计师更加高效地完成设计和创作。
![Alt text](https://shaxutang-static.netlify.app//ddesign_search.webp)
资源免费下载
堆友平台上的很多作品和素材可以免费下载和使用。用户可以通过搜索或者分类推荐找到自己需要的素材,并可以免费下载和使用。
![Alt text](https://shaxutang-static.netlify.app//ddesign_download.webp)
AI创作
堆友推出了 Beta 版的AI反应堆,可以进行AI创作。
![Alt text](https://shaxutang-static.netlify.app//ddesign_ai.webp)
AI创作展示
这是我用堆友创作的作品🤣
![Alt text](https://shaxutang-static.netlify.app//blue_girl.png)
除此之外,堆友还为设计师提供了技能提升的机会,包括设计技巧、行业动态、案例分享等,让设计师可以在不断学习和交流中提升自己的设计水平和能力。
tailwind CSS 是一个基于原子类的 CSS 框架,它提供了一套可复用的 CSS 类,用于快速构建现代化的用户界面。与传统的 CSS 框架不同,tailwind CSS 不依赖于预定义的组件,而是通过组合多个原子类来构建界面。
为什么要使用 tailwind
tailwind CSS 的核心理念是提供一组小而简单的 CSS 类,每个类都代表一个特定的样式属性。通过将这些类组合在一起,开发者可以轻松地构建出各种样式。
例如,要创建一个按钮,可以使用 bg-blue-500 类设置背景颜色为蓝色,使用 text-white
类设置文字颜色为白色,使用 px-4
py-2
类设置内边距等。
<button class="bg-blue-500 px-4 py-2 text-white">button</button>
与其他 CSS 框架相比,tailwind CSS 具有以下优点:
如何使用 tailwind
因为 tailwind CSS 本身并不依赖于任何特定的前端框架。你只需要在项目中安装 tailwind CSS,并在你的项目中使用相应的 CSS 类即可。
安装
npm install -D tailwindcss postcss autoprefixer
初始化 tailwind 配置文件
npx tailwindcss init -p
执行完成后将会在项目根目录生成 tailwind.config.js
配置文件
我们只需要在content
属性中配置哪类文件需要使用 tailwind 即可
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
引入 tailwindcss
- 在自己项目中通过 @tailwind 指令引入
@tailwind base;
@tailwind components;
@tailwind utilities;
- 在项目入口文件引入
tailwindcss/tailwind.css
import "tailwindcss/tailwind.css";
这种方式等同于上述 1
在 Vue 项目中使用
vue 项目中只需要在 tailwind.config.js
中配置 .vue
文件
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
在 vue 文件中使用
<template>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>
在 React 项目中使用
同在 vue 项目中一样,在tailwind.config.js
中配置 .jsx/tsx
文件即可
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
在 jsx 文件中使用
export default function App() {
return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}
在本站使用
我引入 tailwind 的原因,是因为当我使用 flex 实现垂直水平居中时,总是会把 align-items
写成 items-center
, fuck!!
由于本站基于React
实现,因此按照上述步骤即使用 tailwind