https://github.com/ntsd/tailwind-plugin-boilerplate
Tailwind plugin boilerplate, Support Tailwind v4
https://github.com/ntsd/tailwind-plugin-boilerplate
postcss tailwind tailwind-css tailwind-plugin tailwindcss tailwindcss-plugin tailwindv4
Last synced: 8 months ago
JSON representation
Tailwind plugin boilerplate, Support Tailwind v4
- Host: GitHub
- URL: https://github.com/ntsd/tailwind-plugin-boilerplate
- Owner: ntsd
- License: mit
- Created: 2025-06-19T16:38:59.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-20T16:55:28.000Z (8 months ago)
- Last Synced: 2025-06-20T17:44:49.095Z (8 months ago)
- Topics: postcss, tailwind, tailwind-css, tailwind-plugin, tailwindcss, tailwindcss-plugin, tailwindv4
- Language: HTML
- Homepage: https://www.npmjs.com/package/tailwind-plugin-boilerplate
- Size: 16.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS Plugin Boilerplate
A boilerplate for creating Tailwind CSS plugins with TypeScript.
Supporting Tailwind V4.
## Installation
```bash
npm install tailwind-plugin-boilerplate
```
## Usage
There are multiple ways to use this plugin with Tailwind CSS v4:
### Option 1: Import in your CSS file
```css
@layer base, theme, utilities, components;
@import "tailwindcss";
@plugin "tailwind-plugin-boilerplate";
/* Optional: customize the plugin */
@theme {
/* Custom colors for the example-color match utility */
--example-color-primary: #ff5733;
--example-color-secondary: #33ff57;
--example-color-accent: #5733ff;
}
```
For this to work, make sure you have PostCSS configured:
```js
// postcss.config.js
export default {
plugins: [
"@tailwindcss/postcss",
// Other plugins...
],
}
```
### Option 2: Using with Vite
```js
// vite.config.js
import { defineConfig } from "vite"
import tailwindcss from "@tailwindcss/vite"
export default defineConfig({
plugins: [
tailwindcss({
// If you need additional plugins
plugins: ["tailwind-plugin-boilerplate"],
}),
],
})
```
## Features
This plugin boilerplate demonstrates several features of Tailwind CSS plugins:
- **Theme integration**: Access and use values from the Tailwind theme
- **Custom utilities**: Create your own utility classes
- **Custom components**: Define reusable component classes
- **Match utilities**: Generate utilities with modifiers
## Example Components
The plugin includes examples of:
1. **Basic Utility**
```html
...
```
2. **Component Example**
```html
...
```
3. **Match Utility - Colors**
```html
Primary Color Text
Secondary Color Text
Accent Color Text
```
## Customization
You can customize the plugin behavior through Tailwind's theming system. Here's how to customize the colors for the example-color utility:
```css
/* in your CSS file */
@theme {
/* Custom colors for the example-color match utility */
--example-color-primary: #ff5733; /* Customized primary color */
--example-color-secondary: #33ff57; /* Customized secondary color */
--example-color-accent: #5733ff; /* Customized accent color */
}
```
## Plugin Structure
The plugin demonstrates three main types of Tailwind extensions:
1. **Utilities (addUtilities)**: Simple utility classes that apply specific CSS properties
```js
addUtilities({
".example-utility": {
position: "relative",
display: "inline-block",
gap: theme("spacing.4", "1rem"),
},
})
```
2. **Components (addComponents)**: More complex, reusable components
```js
addComponents({
".example-component": {
padding: "1rem",
borderRadius: theme("borderRadius.md", "0.375rem"),
},
})
```
3. **Match Utilities (matchUtilities)**: Dynamic utilities with modifiers
```js
matchUtilities(
{
"example-color": (value) => ({
color: value,
}),
},
{
values: {
primary: theme("example-color-primary", "#3b82f6"),
secondary: theme("example-color-secondary", "#10b981"),
accent: theme("example-color-accent", "#f59e0b"),
},
},
)
```
## Development
1. Clone the repository
2. Install dependencies with `npm install`
3. Run development build with `npm run dev`
4. Build the plugin with `npm run build`
5. Check the example in the `/example` folder
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
[MIT](LICENSE)