@mcdougald/tailwindcss-config
v0.1.3
Published
A comprehensive Tailwind CSS configuration with modern plugins and utilities for React applications
Downloads
155
Maintainers
trevormcdougaldReadme
@mcdougald/tailwindcss-config
A comprehensive Tailwind CSS configuration with modern plugins and utilities for React applications.
Features
- 🎨 Modern Design System - Pre-configured color palette, typography, and spacing
- 🚀 Performance Optimized - Optimized content paths and purging
- 🌙 Dark Mode Support - Built-in dark mode with class-based switching
- 🎭 Rich Animations - 20+ custom animations and keyframes
- 📱 Responsive Design - Extended breakpoints including extra small screens
- 🎯 Plugin Integration - Pre-configured with essential Tailwind plugins
- 🎪 Motion Support - Advanced motion and transition utilities
Installation
pnpm add @mcdougald/tailwindcss-configUsage
Basic Setup
Create a tailwind.config.js file in your project root:
import config from '@mcdougald/tailwindcss-config'
export default configTypeScript Support
For TypeScript projects, create a tailwind.config.ts file:
import type { Config } from 'tailwindcss'
import config from '@mcdougald/tailwindcss-config'
export default config satisfies ConfigNext.js Integration
For Next.js projects, update your tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
...require('@mcdougald/tailwindcss-config'),
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
}Included Plugins
- @tailwindcss/forms - Better form styling defaults
- @tailwindcss/typography - Beautiful typographic defaults
- @tailwindcss/aspect-ratio - Aspect ratio utilities
- tailwindcss-animate - Animation utilities
- tailwindcss-motion - Motion and transition utilities
Custom Features
Extended Breakpoints
/* Extra small screens */
@media (min-width: 380px) { /* xs */ }Custom Color Palette
The configuration includes a comprehensive gray scale and semantic colors:
- Primary Colors: Blue, Pink, Green, Red, Yellow
- Gray Scale: 15 shades from dark (100) to light (35)
- Semantic Colors: Primary, Secondary, Muted, Accent, Background
Custom Animations
20+ custom animations including:
ellipsis- Loading dots animationheartbeat- Heartbeat effectshimmer- Shimmer loading effectmarquee- Horizontal scrolling textgradient- Animated gradient backgroundmeteor- Falling meteor effectspotlight- Spotlight reveal effectwaving-hand- Waving hand animation
Custom Shadows
Pre-defined shadow utilities:
shadow-depth-1- Subtle depth shadowshadow-hover-card- Card hover effect- Enhanced
md,lg,xlshadows
Background Gradients
Custom gradient utilities:
bg-gradient-radial- Radial gradientbg-shimmer-gradient- Shimmer effectbg-shimmer-gradient-dark- Dark mode shimmer
Content Paths
The configuration includes optimized content paths for:
- App directory structure
- Components directory
- Pages directory
- UI components
- Library packages
Dark Mode
Dark mode is enabled using the class strategy. Add the dark class to enable dark mode:
<html class="dark">
<!-- Your app content -->
</html>CSS Variables
The configuration uses CSS variables for theming:
:root {
--font-inter: 'Inter', sans-serif;
--font-roboto-mono: 'Roboto Mono', monospace;
--color: /* primary color */;
--secondary: /* secondary color */;
--muted: /* muted color */;
--accent: /* accent color */;
--background: /* background color */;
--green: /* green color */;
--red: /* red color */;
}Examples
Using Custom Animations
<div class="animate-shimmer bg-shimmer-gradient">
Loading content...
</div>
<div class="animate-heartbeat">
❤️ Heartbeat animation
</div>
<div class="animate-marquee">
Scrolling text content
</div>Using Custom Colors
<div class="bg-primary text-primary-foreground">
Primary themed content
</div>
<div class="bg-gray-100 dark:bg-gray-35">
Adaptive background
</div>Using Custom Shadows
<div class="shadow-depth-1">
Subtle depth effect
</div>
<div class="shadow-hover-card hover:shadow-lg">
Interactive card
</div>Browser Support
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
License
MIT
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Support
If you have any questions or need help, please open an issue on GitHub.
Made with ❤️ by Trevor McDougald