Modern web development — TailwindCSS, Storybook, browser-optimized TypeScript
• Usage • Configuration • Comparison • FAQ •
This is a configuration extension that works with Presetter, the configuration management tool.
# Install web preset alongside a base preset
npm i -D presetter presetter-preset-essentials presetter-preset-web
# Create presetter.config.ts
cat > presetter.config.ts << 'EOF'
import { preset } from 'presetter';
import essentials from 'presetter-preset-essentials';
import web from 'presetter-preset-web';
export default preset('my-web-app', {
extends: [essentials, web],
});
EOF
# Bootstrap your project
npx presetter bootstrapYour project now has modern web development tooling — TailwindCSS 4, Storybook 9, browser-optimized TypeScript, and intelligent CSS workflows!
Modern web development requires an intricate stack: CSS frameworks, component libraries, browser compatibility, styling workflows, and visual development tools. Setting these up manually is time-consuming and error-prone.
What if you could get the complete modern web stack instantly?
| Web Development Need | Manual Setup | With preset-web |
|---|---|---|
| CSS Framework | ✅ TailwindCSS 4 auto-configured | |
| Component Development | ❌ No visual development | ✅ Storybook 9 with addons |
| Browser Compatibility | ✅ DOM/Browser types included | |
| Styling Workflow | ❌ Basic CSS processing | ✅ PostCSS + Autoprefixer + Prettier |
| CSS Linting | ❌ No CSS-specific rules | ✅ TailwindCSS conflict detection |
| Development Tools | ✅ Integrated accessibility testing |
presetter-preset-web is a configuration extension that adds comprehensive modern web development tooling to any base preset.
When used with Presetter (the configuration management tool), this preset extends your chosen base preset with the complete modern web development stack, including TailwindCSS 4, Storybook 9, browser-optimized TypeScript, and intelligent styling workflows.
- 💨 TailwindCSS 4: Latest utility-first CSS framework with intelligent auto-discovery
- 📚 Storybook 9: Component-driven development with accessibility testing
- 🎨 PostCSS Pipeline: Advanced CSS processing with autoprefixer
- 🌐 Browser-Optimized: TypeScript configured for DOM and modern browser APIs
- 🔍 Smart Linting: TailwindCSS conflict detection and auto-formatting
- 🚀 Zero Config: Intelligent discovery of project structure and entry points
Modern web development requires coordinating multiple complex tools:
- TailwindCSS setup: Configuration, purging, entry points, plugin integration
- Storybook configuration: Stories, addons, accessibility testing, Vitest integration
- Browser TypeScript: DOM types, modern JavaScript features, web-specific APIs
- CSS workflow: PostCSS, autoprefixer, formatting, conflict detection
- Development environment: Hot reloading, visual development, testing integration
Getting it right requires deep knowledge of each tool's configuration and how they interact.
# Before: Manual web development setup
my-web-app/
├── tsconfig.json ← Missing DOM types, browser APIs
├── tailwind.config.js ← Manual configuration, no auto-discovery
├── postcss.config.js ← Basic setup, missing optimizations
├── .storybook/ ← Complex manual setup
│ ├── main.js ← Missing modern addons
│ └── preview.js ← No accessibility testing
├── src/
│ ├── styles/
│ │ └── globals.css ← No auto-discovery
│ └── components/
- └── Button.tsx ← No component development environment
# After: Extended with modern web stack
my-web-app/
+├── presetter.config.ts ← Base preset + web extension
├── tsconfig.json ← Enhanced with DOM, browser types
├── eslint.config.ts ← Enhanced with TailwindCSS linting
├── .prettierrc ← Enhanced with TailwindCSS formatting
+├── All web dev tools ← Generated with intelligent discovery
├── src/
│ ├── styles/
│ │ └── globals.css ← Auto-discovered for TailwindCSS
│ └── components/
+ └── Button.tsx ← Storybook-ready component development- Intelligent Discovery — Auto-detects TailwindCSS entry points, config files, project structure
- Browser Optimization — TypeScript configured with DOM, DOM.Iterable, and ESNext libraries
- Styling Workflow — PostCSS + TailwindCSS + Prettier integration with conflict detection
- Component Development — Storybook 9 with accessibility, testing, and pseudo-state addons
- Complete modern stack: Everything needed for professional web development
- Intelligent auto-configuration: Discovers project structure automatically
- Component-driven development: Visual development environment with testing
- Professional styling: Advanced CSS workflows with conflict detection
- Browser compatibility: Properly configured for modern web APIs
Important distinction:
| Component | Role | What it does |
|---|---|---|
| Presetter | Configuration management tool | CLI that processes presets, generates config files, executes scripts |
| Base Preset | Core development template | Provides TypeScript, testing, building capabilities (essentials, esm, cjs, etc.) |
| presetter-preset-web | Web development extension | Adds TailwindCSS, Storybook, browser optimization, CSS workflows |
Think of it like:
- Presetter = The engine that builds houses
- Base preset = The blueprint for a functional house
- This extension = The modern kitchen, smart home systems, and designer finishes
This preset extends any base preset with modern web development capabilities. For advanced usage, customization, and troubleshooting, visit the main Presetter documentation.
// presetter.config.ts
import { preset } from 'presetter';
import essentials from 'presetter-preset-essentials';
import web from 'presetter-preset-web';
export default preset('my-web-app', {
extends: [essentials, web], // Base preset + web extension
});npm install
# Modern web development stack generated automatically
# TailwindCSS, Storybook, and browser optimization ready!That's it! Start developing with the complete modern web stack.
// presetter.config.ts
import { preset } from 'presetter';
import essentials from 'presetter-preset-essentials';
import web from 'presetter-preset-web';
export default preset('advanced-web-app', {
extends: [essentials, web],
override: {
assets: {
'tsconfig.json': {
compilerOptions: {
lib: ['DOM', 'DOM.Iterable', 'ES2023'], // Latest features
target: 'ES2022', // Modern browser target
},
},
'eslint.config.ts': {
rules: {
// Custom TailwindCSS rules
'tailwindcss/no-custom-classname': 'warn',
},
},
},
},
});Need more customization options? Check the main Presetter documentation for complete guides on overrides, extensions, and advanced configurations.
This preset extends any base preset with modern web development capabilities:
| Enhancement | Purpose | Web Features |
|---|---|---|
| TailwindCSS 4 | Utility-first CSS | Auto-discovery, conflict detection, formatting |
| Storybook 9 | Component development | Accessibility testing, Vitest integration, pseudo-states |
| Browser TypeScript | Web APIs | DOM types, modern JavaScript features |
| CSS Workflow | Styling pipeline | PostCSS, autoprefixer, intelligent formatting |
// Automatically discovers entry files in:
const searchDirectories = [
'source',
'src',
'app',
'styles',
'assets',
'public',
'static',
];
const entryFiles = [
'globals.css',
'global.css',
'index.css',
'main.css',
'styles.css',
];
// Scans for @import "tailwindcss" directives// eslint-plugin-better-tailwindcss
'tailwindcss/classnames-order': 'warn', // Consistent ordering
'tailwindcss/enforces-negative-arbitrary-values': 'warn', // Proper syntax
'tailwindcss/no-contradicting-classname': 'error', // Conflict detection- @storybook/addon-a11y: Accessibility testing and guidelines
- @storybook/addon-vitest: Seamless Vitest integration for component testing
- storybook-addon-pseudo-states: CSS pseudo-state visualization (hover, focus, etc.)
- storybook-addon-test-codegen: Automatic test code generation from stories
// Enhanced TypeScript configuration
compilerOptions: {
lib: ['DOM', 'DOM.Iterable', 'ESNext'], // Complete browser API support
}Inherited from base preset with web-specific enhancements:
| Variable | Default | Description |
|---|---|---|
| Base preset variables | Inherited | All variables from chosen base preset |
| TailwindCSS entry | Auto-discovered | Automatically found CSS entry points |
| Config files | Auto-discovered | Automatically found configuration files |
// Searches common directories for CSS files
const directories = ['src', 'app', 'styles', 'assets'];
const filenames = ['globals.css', 'index.css', 'main.css'];
// Scans file contents for TailwindCSS imports
const tailwindImports = /@import\s+["']tailwindcss/;// Automatically finds configuration files
const configPatterns = [
'tailwind.config.ts',
'tailwind.config.js',
'tailwind.config.mjs',
'tailwind.config.cjs',
];- eslint-plugin-better-tailwindcss: Advanced TailwindCSS linting
- eslint-plugin-storybook: Storybook-specific rules
- globals: Browser environment variables
globals: {
window: 'readonly',
document: 'readonly',
navigator: 'readonly',
// ... all browser globals
}# tsconfig.json override
compilerOptions:
lib:
- DOM # Browser DOM APIs
- DOM.Iterable # Iterable DOM elements
- ESNext # Latest JavaScript features| Metric | Standard Preset | With preset-web |
|---|---|---|
| Component development | Manual setup | Storybook visual environment |
| CSS workflow | Basic | Advanced PostCSS pipeline |
| Browser compatibility | Manual configuration | Auto-optimized TypeScript |
| Styling conflicts | Manual detection | Automated TailwindCSS linting |
| Development experience | Fragmented tools | Integrated modern stack |
| Environment | Support |
|---|---|
| Base Presets | Works with essentials, esm, cjs, hybrid |
| Browsers | Modern browsers (ES2022+) |
| Node.js | ≥ 18 |
| TypeScript | ≥ 5.0 |
presetter-preset-essentials+ web developmentpresetter-preset-esm+ web developmentpresetter-preset-cjs+ web developmentpresetter-preset-hybrid+ web development
presetter-preset-react- React + modern web stackpresetter-preset-strict- Web development + strict quality
presetter-preset-react- Adds React-specific features to web stack
| Feature | Standard Presets | With preset-web |
|---|---|---|
| CSS Framework | None | ✅ TailwindCSS 4 |
| Component Development | Basic | ✅ Storybook 9 environment |
| Browser Optimization | Manual | ✅ Auto-configured TypeScript |
| CSS Workflow | Basic | ✅ PostCSS + Autoprefixer |
| Visual Development | CLI only | ✅ Component playground |
| Accessibility Testing | Manual | ✅ Automated Storybook addon |
✅ Use preset-web when:
- Building web applications or component libraries
- Need modern CSS workflows (TailwindCSS)
- Want visual component development (Storybook)
- Developing for browser environments
- Need accessibility testing integration
- Want professional styling workflows
❌ Consider alternatives when:
- Building Node.js applications or CLIs
- No visual UI components needed
- Basic styling requirements only
- Minimal web development needs
General Presetter issues? See the main troubleshooting guide for common Presetter problems and solutions.
| Issue | Symptoms | Solution |
|---|---|---|
| TailwindCSS not auto-discovered | No CSS framework integration | Ensure CSS files are in common directories (src/, styles/) |
| Storybook not starting | Component development unavailable | Check that base preset provides build tooling |
| Browser types missing | TypeScript errors with DOM APIs | Ensure TypeScript override is applied correctly |
| CSS conflicts undetected | TailwindCSS class conflicts | Check ESLint TailwindCSS plugin configuration |
Need help with Presetter CLI commands? Check the CLI reference in the main documentation.
General Presetter questions? Check the main FAQ for general usage, configuration, and customization questions.
Yes! preset-web is an extension preset that adds web tooling to base functionality:
// ❌ Wrong - web alone doesn't provide TypeScript tooling
extends: [web]
// ✅ Correct - base preset + web extension
extends: [essentials, web]The preset intelligently scans your project:
// Searches these directories for CSS files
['src', 'app', 'styles', 'assets', 'public', 'static']
// Looks for these common CSS file names
['globals.css', 'global.css', 'index.css', 'main.css', 'styles.css']
// Scans file contents for TailwindCSS imports
/@import\s+["']tailwindcss/Professional component development addons:
- Accessibility testing (
@storybook/addon-a11y) - Vitest integration (
@storybook/addon-vitest) - Pseudo-state testing (
storybook-addon-pseudo-states) - Test code generation (
storybook-addon-test-codegen)
Yes! The preset provides value beyond TailwindCSS:
- Storybook for component development
- Browser-optimized TypeScript
- PostCSS workflow
- Enhanced ESLint for web development
Absolutely! Use with presetter-preset-react:
extends: [essentials, web, react] // Full React + web stackWe'd love your ideas and contributions! Submit issues or suggestions via GitHub Issues. See the Contribution Guide for more details.
Released under the MIT License. © 2020, Alvis Tang.
