AnyCreator Tailwind CSS Preset

A Tailwind CSS preset that includes the AnyCreator design system configuration with colors, border radius, and theme values.

Installation

npm install anycreator-tailwind-preset

Usage

Tailwind CSS v3

Add the preset to your tailwind.config.js:

module.exports = {
  presets: [require("anycreator-tailwind-preset")],
  content: [
    // your content paths
  ],
  // your additional configuration
};

Tailwind CSS v4

For Tailwind CSS v4, add the preset to your tailwind.config.ts or tailwind.config.js:

import type { Config } from "tailwindcss";
import preset from "anycreator-tailwind-preset";

export default {
  presets: [preset],
  content: [
    // your content paths
  ],
  // your additional configuration
} satisfies Config;

Or with JavaScript:

import preset from "anycreator-tailwind-preset";

export default {
  presets: [preset],
  content: [
    // your content paths
  ],
  // your additional configuration
};

Included Design Tokens

Colors

• Primary Colors: black-main, blue-main
• State Colors: disabled, error, success
• Gray Scale: Various gray shades with hex-based naming
• Red Scale: Multiple red variants for different use cases

Border Radius

• rounded-xs (3px)
• rounded-sm (5px)
• rounded (7px) - default
• rounded-md (9px)
• rounded-lg (15px)
• rounded-xl (24px)
• rounded-2xl (32px)
• rounded-3xl (40px)
• rounded-4xl (48px)

Background & Border Colors

• bg-main - Main background color
• border-gray-main, border-gray-6e7c89 - Border color variants

Example Usage

<div class="bg-main border border-gray-main rounded-lg p-4">
  <h1 class="text-black-main">Hello AnyCreator</h1>
  <button class="bg-blue-main text-white rounded-md px-4 py-2">Click me</button>
</div>

Development & Publishing

🚀 Fully Automated Publishing

This package uses semantic-release for zero-config automated publishing. No manual versioning needed!

How it works:

1. Create a feature branch
2. Make changes with conventional commit messages
3. Open a Pull Request to main
4. Merge the PR → Automatic release! 🎉

Quick Start for Contributors

# Create feature branch
git checkout -b feature/new-colors

# Make changes with conventional commits
git commit -m "feat: add purple color palette"
git commit -m "fix: correct border-radius values"

# Push and create PR
git push origin feature/new-colors
# Open PR on GitHub, get it reviewed, then merge

# 🎉 Automatic release happens on merge!

What gets automated:

• ✅ Version calculation (patch/minor/major)
• ✅ CHANGELOG.md generation
• ✅ npm publishing
• ✅ GitHub releases with notes
• ✅ Git tags

Commit Message Guide

| Type | Example | Release | | ------------------------------ | -------------------------------- | ------------- | | fix: | fix: border radius calculation | Patch (1.0.1) | | feat: | feat: add purple color palette | Minor (1.1.0) | | feat!: or BREAKING CHANGE: | feat!: rename color variables | Major (2.0.0) | | docs:, style:, refactor: | docs: update examples | No release |

Setup (One-time)

1. Add NPM token to GitHub:
   • Generate token at npmjs.com (Automation type)
   • Add to repo secrets as NPM_TOKEN

That's it! 🎯

Manual Publishing (Emergency Only)

npm login
bun run prepublishOnly  # Validate
npm publish  # npm still needed for publishing

💡 Tip: See CONTRIBUTING.md for detailed examples and workflow explanations.

Package Contents

The published package includes:

• index.js - Main preset configuration
• README.md - Documentation
• LICENSE - MIT license
• package.json - Package metadata

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.