Skip to content

Commit aa8b94a

Browse files
app-generatorapp-generator
committed
Update Tailwind Section
1 parent 26fa633 commit aa8b94a

File tree

5 files changed

+131
-13
lines changed

5 files changed

+131
-13
lines changed

‎docs/content/tailwind-css/README.mdx‎

Lines changed: 96 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,103 @@ sidebar_label: Tailwind CSS
77

88
<SubHeading>Tailwind-related content providd by AppSeed.</SubHeading>
99

10-
import DocCardList from "@theme/DocCardList";
11-
import { useCurrentSidebarCategory } from "@docusaurus/theme-common";
12-
import SubHeading from "@site/src/components/SubHeading";
10+
Tailwind CSS is a popular utility-first CSS framework that allows you to rapidly build user interfaces by composing classes.
11+
It's known for its simplicity and flexibility.
1312

14-
<DocCardList />
13+
![What IS Tailwind CSS - Tutorial provided by AppSeed.](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/269556078-dc0469ef-47dc-4e82-bf25-cdab6963a0e7.jpg)
14+
15+
> Here's a **comprehensive introduction with coding samples** to get you started:
16+
17+
## ✅ **Installation**
18+
19+
Before using Tailwind CSS, you need to install it via npm or yarn. Make sure you have a new or existing HTML file to work with.
20+
21+
```bash
22+
# Install Tailwind CSS
23+
npm install tailwindcss
24+
25+
# Create a configuration file (if not already present)
26+
npx tailwindcss init
27+
```
28+
29+
## ✅ **Setting Up HTML**
30+
31+
Create an HTML file (e.g., `index.html`) and include Tailwind CSS in the head of your document.
32+
33+
```html
34+
<!DOCTYPE html>
35+
<html lang="en">
36+
<head>
37+
<meta charset="UTF-8">
38+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
39+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
40+
<title>Your App</title>
41+
</head>
42+
<body>
43+
<!-- Your content goes here -->
44+
</body>
45+
</html>
46+
```
47+
48+
## ✅ **Basic Styling**
49+
50+
Let's create a button using Tailwind CSS classes.
51+
52+
```html
53+
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
54+
Click me
55+
</button>
56+
```
1557

16-
<br />
58+
This code creates a blue button with white text that turns darker on hover.
59+
60+
## ✅ **Responsive Design**
61+
62+
Tailwind makes it easy to create responsive layouts. Here's a simple example of a responsive grid.
63+
64+
```html
65+
<div class="lg:flex lg:justify-between">
66+
<div class="lg:w-1/4">Sidebar</div>
67+
<div class="lg:w-3/4">Main Content</div>
68+
</div>
69+
```
70+
71+
In this example, the layout changes from a single column to a two-column layout on large screens (`lg` breakpoint).
72+
73+
## ✅ **Customization**
74+
75+
You can customize Tailwind CSS by editing your `tailwind.config.js` file. For example, if you want to add your custom colors:
76+
77+
```javascript
78+
// tailwind.config.js
79+
module.exports = {
80+
theme: {
81+
extend: {
82+
colors: {
83+
'primary': '#FF5722',
84+
'secondary': '#2196F3',
85+
},
86+
},
87+
},
88+
variants: {},
89+
plugins: [],
90+
};
91+
```
92+
93+
Now, you can use these custom colors in your HTML:
94+
95+
```html
96+
<div class="bg-primary text-white">Primary Background</div>
97+
<div class="bg-secondary text-white">Secondary Background</div>
98+
```
99+
100+
These examples should give you a good start with Tailwind CSS. For production-ready starters & templates, feel free to access the products listed in this section:
101+
102+
<DocCardList />
17103

18-
## Resources
104+
## ✅ Resources
19105

20-
- 👉 More [Free Starters](https://appseed.us/admin-dashboards/open-source/) - crafted by AppSeed
21-
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord
106+
- 👉 Access [AppSeed](https://appseed.us/) and start your next project
107+
- 👉 [Deploy Projects on Aws, Azure and Digital Ocean](https://www.docs.deploypro.dev/) via **DeployPRO**
108+
- 👉 Create an amazing landing page with [Simpllo, an open-source site builder](https://www.simpllo.com/)
109+
- 👉 [Django App Generator](https://app-generator.dev/django/) - A 2nd generation App Builder

‎docs/content/tailwind-css/argon-dashboard.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ Every element has multiple states for colors, styles, hover, focus, that you can
2222

2323
<br />
2424

25-
## Resources
25+
## ✅ Resources
2626

27-
- 👉 [Argon Tailwind Django](https://github.com/app-generator/django-argon-dashboard-tailwind) - integration of this kit in `Django`
27+
- 👉 More [Tailwind Templates](https://www.creative-tim.com/templates/tailwind-free?AFFILIATE=128200) - all free
2828
- 👉 [Admin dashboards](https://www.admin-dashboards.com/) - a huge index with templates and apps
2929
- 👉 More [ui themes and templates](https://www.ui-themes.com/) - free & paid products

‎docs/content/tailwind-css/material-dashboard-react.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ This free Material Tailwind, Tailwind CSS & React Dashboard is coming with prebu
2323

2424
<br />
2525

26-
## Resources
26+
## ✅ Resources
2727

28+
- 👉 More [Tailwind Templates](https://www.creative-tim.com/templates/tailwind-free?AFFILIATE=128200) - all free
2829
- 👉 [Admin dashboards](https://www.admin-dashboards.com/) - a huge index with templates and apps
2930
- 👉 More [ui themes and templates](https://www.ui-themes.com/) - free & paid products

‎docs/content/tailwind-css/soft-ui-dashboard.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ All components can take variations in colour, that you can easily modify using S
2222

2323
<br />
2424

25-
## Resources
25+
## ✅ Resources
2626

27-
- 👉 [Soft Tailwind Django](https://github.com/app-generator/django-soft-dashboard-tailwind) - integration of this kit in `Django`
27+
- 👉 More [Tailwind Templates](https://www.creative-tim.com/templates/tailwind-free?AFFILIATE=128200) - all free
2828
- 👉 [Admin dashboards](https://www.admin-dashboards.com/) - a huge index with templates and apps
2929
- 👉 More [ui themes and templates](https://www.ui-themes.com/) - free & paid products

‎docs/content/tailwind-css/soft-ui-flowbite.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Soft UI Flowbite - Open-Source Dashboard styled with Tailwind
3+
sidebar_label: Soft UI Flowbite
4+
---
5+
6+
# [Soft UI Flowbite](https://www.creative-tim.com/product/soft-ui-flowbite?AFFILIATE=128200) `Tailwind`
7+
8+
<SubHeading>Modern Tailwind Dashboard Template crafted by Creative-Tim using Flowbite</SubHeading>
9+
10+
Build your website faster with an Innovative Admin Template based on TailwindCSS, Flowbite, and HTML.
11+
**Soft UI Flowbite** features a huge number of components built to fit together and look amazing.
12+
13+
- 👉 [Soft UI Flowbite](https://www.creative-tim.com/product/soft-ui-flowbite?AFFILIATE=128200) - `product page`
14+
- 👉 [Soft UI Flowbite](https://demos.creative-tim.com/soft-ui-flowbite/?AFFILIATE=128200) - `LIVE Demo`
15+
16+
Soft UI Flowbite is built with over 30 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.
17+
All components can take variations in color, which you can easily modify using TailwindCSS config and classes.
18+
19+
**Example Pages** - If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages.
20+
21+
![Soft UI Flowbite - Open-Source Dashboard styled with Tailwind](https://github-production-user-asset-6210df.s3.amazonaws.com/51070104/269673124-ba603011-cc78-4f77-b536-ac813fdf2b0c.png)
22+
23+
<br />
24+
25+
## ✅ Resources
26+
27+
- 👉 More [Tailwind Templates](https://www.creative-tim.com/templates/tailwind-free?AFFILIATE=128200) - all free
28+
- 👉 [Admin dashboards](https://www.admin-dashboards.com/) - a huge index with templates and apps
29+
- 👉 More [ui themes and templates](https://www.ui-themes.com/) - free & paid products

0 commit comments

Comments
 (0)