---
name: tapforce-talwindcss
description: Practices to use consistent tailwindcss in project Svelte
---

# tapforce-talwindcss

Collection of practices to use consistent tailwindcss in project Svelte.

## When to use

Use this skill when project mention about tapforce, and use Sveltekit as main framework, and use tailwindcss or you think project should use tailwindcss.

## Instructions

Skill separated to rules under `./rules` with prefix, following priority:

| Priority | Rule    | prefix | Description                                                |
| -------- | ------- | ------ | ---------------------------------------------------------- |
| 1        | prepare | `pr`   | Steps and practices to prepare project to use tailwindcss. |
| 2        | policy  | `pl`   | Practices to follow when use tailwindcss.                  |

Each rules have own name, description, and tags.
Rule can include **Incorrect**, **Correct**, or **Example** code block.

Full version of skill and rules represent with file AGENTS.md.

## Reference

- [install with sveltekit](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)
- [color builtin](https://tailwindcss.com/docs/colors)
- [Adding custom style](https://tailwindcss.com/docs/adding-custom-styles)
- [Responsive design](https://tailwindcss.com/docs/responsive-design)
- [Dark mode](https://tailwindcss.com/docs/dark-mode)
- [Hover, focus, and other states](https://tailwindcss.com/docs/hover-focus-and-other-states)