Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tbs96/tailwindcss-tutorial
https://github.com/tbs96/tailwindcss-tutorial
tailwindcss
Last synced: 23 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/tbs96/tailwindcss-tutorial
- Owner: TBS96
- Created: 2024-08-26T13:26:49.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-16T17:10:06.000Z (4 months ago)
- Last Synced: 2024-09-16T22:36:24.547Z (4 months ago)
- Topics: tailwindcss
- Language: HTML
- Homepage:
- Size: 12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TailwindCSS setup with `Vite`, `PostCSS`, `AutoPrefixer`:
## 1. Setup `npm`:
```bash
npm init -y
```
## 2. Install & initialize:
```bash
npm install -D tailwindcss postcss autoprefixer vite
```
```bash
npx tailwindcss init -p
```
## 3. Open `tailwind.config.js` file & set content as ALL (*):
```bash
content: ['*']
```
## 4. Create folder `CSS` & a file within it, as `main.css` & add the Tailwind directives:
```bash
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## 5. Link `CSS/main.css` with `index.html`
```bash
```
## 6. Open `package.json` and set the below, under scripts:
```bash
"start": "vite"
```
## 7. Open terminal & run:
```bash
npm run start
```
# To install & use `daisyUI`:
## 1. Follow upto `5th` step from above.
## 2. Install `daisyUI` as a Node package:
```bash
npm i -D daisyui@latest
```
## 3. Add `daisyUI` to `tailwind.config.js` => `module.exports` => `plugins[]`:
```bash
require('daisyui')
```
## 4. Goto `package.json` => `"scripts":{}` & add the following:
```bash
"dev": "vite"
```
## 5. Open terminal & run:
```bash
npm run dev
```
# To build for production:
## Goto `package.json` => `"scripts":{}` & add the following:
```bash
"build": "vite build"
```