https://github.com/ogty/astro-tailwindcss-template

🚀 × 💨 Astro and Tailwind CSS template repository. Icon component creation and unused component deletion functions are available.
https://github.com/ogty/astro-tailwindcss-template

astro icons tailwindcss template tools

Last synced: 28 days ago
JSON representation

🚀 × 💨 Astro and Tailwind CSS template repository. Icon component creation and unused component deletion functions are available.

• Host: GitHub
• URL: https://github.com/ogty/astro-tailwindcss-template
• Owner: ogty
• Created: 2022-09-03T18:23:46.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-07T02:15:03.000Z (almost 2 years ago)
• Last Synced: 2025-01-03T03:55:41.982Z (about 1 month ago)
• Topics: astro, icons, tailwindcss, template, tools
• Language: Makefile
• Homepage:
• Size: 300 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Astro × Tailwind CSS Template


## 📷 Icon Component Creation

Icons in [Bootstrap Icons](https://icons.getbootstrap.com/) can be easily converted to icon components.

```zsh

$ make icon name=1-circle

```

The `OneCircle.astro` file will be created in `src/components/icons` after executing the above command.

Use `size=1` to set the `size` prop for the icon component.

Use `color=1` to set the `color` prop for the icon component.

```zsh

$ make icon name=1-circle size=1

```

> **Note**  

> The default value is false with both `size` and `color` being 0

This command will generate the following file.

**`src/components/icons/OneCircle.astro`**

```astro

---

export interface Props {

  size: number;

}

const { size } = Astro.props;

---

  

```

Both `size` and `color` can be used.

```zsh

$ make icon name=1-circle size=1 color=1

```

> **Note**  

> Component extensions and paths can be changed by rewriting `COMPONENT_EXTENSION` and `ICON_PATH` in the Makefile.

## 🗑 Remove modules that have not been called

Unused components can be identified and removed by executing the following commands.

Rewrite `IGNORE_DIRS` and `IGNORE_FILES` in `tools/unused` for any directories or files you do not want to include.

```zsh

$ make unused

```

### Target extensions

The target files are written in `TARGET_EXTENSIONS` and by default the following extensions are covered.



  



- `.jsx`

- `.tsx`

- `.astro`

- `.svelte`

- `.vue`

## 🌳 Directory structure directly under src

```

src

├── assets

│   └── images

├── components

│   ├── atoms

│   ├── icons

│   ├── molecules

│   ├── organisms

│   └── templates

├── env.d.ts

├── layouts

│   └── Layout.astro

└── pages

    └── index.astro

```