@jgmelgares/tw-presets v1.0.0
Tailwind Presets
A reusable Tailwind CSS preset package for creating customizable and consistent design systems. This package includes a Tailwind preset configuration and a CSS file with predefined variables, supporting light and dark modes.
š Features
- Customizable Design System: Predefined colors, utilities, and components.
- Light & Dark Mode: Automatically adapts styles based on the active mode.
- Reusable Components: Includes base styles for buttons, typography, and more.
- Extendable Preset: Add your customizations easily on top of the provided configurations.
š¦ Installation
Add the package to your project:
npm install tw-presetsAdd the preset to your Tailwind configuration:
const myPreset = require('tw-presets/tailwind-preset'); module.exports = { presets: [myPreset], content: ['./src/**/*.{html,js,ts,jsx,tsx}'], // Adjust paths as needed };Import the CSS in your application (if needed):
import 'tw-presets/styles.css';
š Usage
Example: Light & Dark Mode Button
<html class="dark">
<body>
<div class="p-4">
<button class="btn-primary">Primary Button</button>
</div>
</body>
</html>Example: Custom Colors
Use the primary color defined in the preset:
<div class="bg-primary text-white p-4 rounded">
This is a component using the primary color!
</div>š Folder Structure
tw-presets/
āāā tailwind.config.js # Tailwind config for local build
āāā tailwind-preset.js # Tailwind preset file
āāā styles.css # Tailwind styles with predefined variables
āāā package.json # Package metadata
āāā README.md # DocumentationāØ Customization
Extending the Preset
You can override or extend the preset in your project:
module.exports = {
presets: [require('tw-presets/tailwind-preset')],
theme: {
extend: {
colors: {
customColor: '#ff5733',
},
},
},
};Add Your Own Components
Define custom classes in your styles.css or Tailwind configuration:
.btn-secondary {
@apply bg-gray-600 text-white py-2 px-4 rounded;
}š License
This project is licensed under the MIT License.
š„ Contributing
Contributions are welcome! If you have ideas or find bugs, feel free to:
- Open an issue
- Submit a pull request
š Acknowledgments
Thanks to the Tailwind CSS team for building such an amazing framework!
š¬ Support
If you encounter any issues or have questions, please open an issue.