hjemmesidekongen/expo-tailwind
plugins/smedjen/skills/expo-tailwind/SKILL.md
NativeWind / Tailwind CSS in React Native — setup, styling patterns, theme config, and platform differences for Expo projects.
development
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add hjemmesidekongen/ai expo-tailwindInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 5:31 PM169.1s2 files scanned
SKILL.md
- name:
- expo-tailwind
- description:
- >
- user_invocable:
- false
- interactive:
- false
- model_tier:
- senior
- depends_on:
- []
- reads:
- []
- writes:
- []
- type:
- data_validation
- - name:
- no_mixed_styling
- verify:
- No StyleSheet.create mixed with className on the same component
- fail_action:
- Pick one approach per component — mixing creates style conflicts
- on_fail:
- NativeWind setup has issues — check Babel config and Tailwind content paths
- on_pass:
- NativeWind configuration is correct
- origin:
- smedjen
- inspired_by:
- original
- ported_date:
- 2026-03-10
- iteration:
- 1
- changes:
- New discipline skill for smedjen
expo-tailwind
NativeWind brings Tailwind CSS to React Native via a Babel transform that converts className props to StyleSheet objects at compile time. Same API as web Tailwind, running on the RN style engine.
Setup (NativeWind v4)
npx expo install nativewind tailwindcss && npx tailwindcss init
tailwind.config.js: set content to your source globs, add presets: [require('nativewind/preset')]. babel.config.js: add 'nativewind/babel' to plugins. global.css: @import "tailwindcss" — import in root _layout.tsx.
className Prop
<View className="flex-1 bg-white px-4">
<Text className="text-xl font-bold text-gray-900">Hello</Text>
</View>
NativeWind extends React Native's TypeScript types — className is typed on all core components after setup.
Platform Variants
Built-in: ios:, android:, web:. Use for platform-specific spacing, font weights, or shadows.
<View className="p-4 ios:pt-8 android:pt-6" />
Dark Mode and Theming
darkMode: 'media' (follows system) or 'class' (manual toggle) in tailwind.config.js. Usage: className="bg-white dark:bg-gray-900". Extend colors, fonts, and spacing under theme.extend. For custom fonts, pair with expo-font — font family name in config must match the loaded font name.
Expo Router Integration
className works on layouts and screens. Safe-area utilities via nativewind/safe-area: pt-safe, pb-safe. No special router config needed.
See references/process.md for responsive design, CSS variables, web compatibility, StyleSheet migration, performance, NativeWind v4 vs v2 differences, limitations vs web Tailwind, and anti-patterns.
Related Skills
hjemmesidekongen/brand-strategy
development
VerifiedTrustedCommunity
Creates a brand from scratch through market research and interactive sparring. Runs competitive research via Perplexity, then guides the user through positioning, audience, voice, values, and content pillars. Produces the full brand guideline set at .ai/brand/{name}/. Use when building a new brand, defining brand strategy for a product, or when /våbenskjold:create is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-loader
testing
VerifiedTrustedCommunity
Loads brand guidelines from .ai/brand/{name}/ and makes them available to the current context. Progressive disclosure: L1 confirms brand exists, L2 loads summary, L3 loads specific files on demand. Use when a downstream skill or user needs brand context, or when /våbenskjold:apply is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-evolve
documentation
VerifiedTrustedCommunity
Guided reinvention of an existing brand guideline. Loads current brand from .ai/brand/{name}/, identifies what to keep vs change, and walks the user through targeted evolution. Preserves brand equity while updating positioning, voice, or values. Use when refreshing a brand or when /våbenskjold:evolve is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-audit
development
VerifiedTrustedCommunity
Codifies an existing brand from materials, samples, and references. Analyzes provided content to extract voice patterns, values, and positioning. Produces the same guideline format as brand-strategy. Use when a brand already exists but isn't documented, or when /våbenskjold:audit is invoked.
SKILL.mdUpdated Apr 5, 2026