feat: add Tailwind CSS configuration and build setup
- Add package.json with Tailwind dependencies - Add tailwind.config.js and postcss.config.js - Add source tailwind.css file - Generate tailwind.output.css for admin and vendor - Add Tailwind CSS documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
233
tailwind.config.js
Normal file
233
tailwind.config.js
Normal file
@@ -0,0 +1,233 @@
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
const plugin = require('tailwindcss/plugin')
|
||||
const Color = require('color')
|
||||
|
||||
module.exports = {
|
||||
purge: {
|
||||
content: [
|
||||
'public/**/*.html',
|
||||
'app/templates/**/*.html',
|
||||
'static/**/*.js',
|
||||
],
|
||||
// Safelist classes used dynamically in Alpine.js expressions
|
||||
safelist: [
|
||||
'bg-orange-600',
|
||||
'bg-green-600',
|
||||
'bg-red-600',
|
||||
'hover:bg-orange-700',
|
||||
'hover:bg-green-700',
|
||||
'hover:bg-red-700',
|
||||
],
|
||||
},
|
||||
theme: {
|
||||
themeVariants: ['dark'],
|
||||
customForms: (theme) => ({
|
||||
default: {
|
||||
'input, textarea': {
|
||||
'&::placeholder': {
|
||||
color: theme('colors.gray.400'),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
colors: {
|
||||
transparent: 'transparent',
|
||||
white: '#ffffff',
|
||||
black: '#000000',
|
||||
gray: {
|
||||
'50': '#f9fafb',
|
||||
'100': '#f4f5f7',
|
||||
'200': '#e5e7eb',
|
||||
'300': '#d5d6d7',
|
||||
'400': '#9e9e9e',
|
||||
'500': '#707275',
|
||||
'600': '#4c4f52',
|
||||
'700': '#24262d',
|
||||
'800': '#1a1c23',
|
||||
'900': '#121317',
|
||||
// default values from Tailwind UI palette
|
||||
// '300': '#d2d6dc',
|
||||
// '400': '#9fa6b2',
|
||||
// '500': '#6b7280',
|
||||
// '600': '#4b5563',
|
||||
// '700': '#374151',
|
||||
// '800': '#252f3f',
|
||||
// '900': '#161e2e',
|
||||
},
|
||||
'cool-gray': {
|
||||
'50': '#fbfdfe',
|
||||
'100': '#f1f5f9',
|
||||
'200': '#e2e8f0',
|
||||
'300': '#cfd8e3',
|
||||
'400': '#97a6ba',
|
||||
'500': '#64748b',
|
||||
'600': '#475569',
|
||||
'700': '#364152',
|
||||
'800': '#27303f',
|
||||
'900': '#1a202e',
|
||||
},
|
||||
red: {
|
||||
'50': '#fdf2f2',
|
||||
'100': '#fde8e8',
|
||||
'200': '#fbd5d5',
|
||||
'300': '#f8b4b4',
|
||||
'400': '#f98080',
|
||||
'500': '#f05252',
|
||||
'600': '#e02424',
|
||||
'700': '#c81e1e',
|
||||
'800': '#9b1c1c',
|
||||
'900': '#771d1d',
|
||||
},
|
||||
orange: {
|
||||
'50': '#fff8f1',
|
||||
'100': '#feecdc',
|
||||
'200': '#fcd9bd',
|
||||
'300': '#fdba8c',
|
||||
'400': '#ff8a4c',
|
||||
'500': '#ff5a1f',
|
||||
'600': '#d03801',
|
||||
'700': '#b43403',
|
||||
'800': '#8a2c0d',
|
||||
'900': '#771d1d',
|
||||
},
|
||||
yellow: {
|
||||
'50': '#fdfdea',
|
||||
'100': '#fdf6b2',
|
||||
'200': '#fce96a',
|
||||
'300': '#faca15',
|
||||
'400': '#e3a008',
|
||||
'500': '#c27803',
|
||||
'600': '#9f580a',
|
||||
'700': '#8e4b10',
|
||||
'800': '#723b13',
|
||||
'900': '#633112',
|
||||
},
|
||||
green: {
|
||||
'50': '#f3faf7',
|
||||
'100': '#def7ec',
|
||||
'200': '#bcf0da',
|
||||
'300': '#84e1bc',
|
||||
'400': '#31c48d',
|
||||
'500': '#0e9f6e',
|
||||
'600': '#057a55',
|
||||
'700': '#046c4e',
|
||||
'800': '#03543f',
|
||||
'900': '#014737',
|
||||
},
|
||||
teal: {
|
||||
'50': '#edfafa',
|
||||
'100': '#d5f5f6',
|
||||
'200': '#afecef',
|
||||
'300': '#7edce2',
|
||||
'400': '#16bdca',
|
||||
'500': '#0694a2',
|
||||
'600': '#047481',
|
||||
'700': '#036672',
|
||||
'800': '#05505c',
|
||||
'900': '#014451',
|
||||
},
|
||||
blue: {
|
||||
'50': '#ebf5ff',
|
||||
'100': '#e1effe',
|
||||
'200': '#c3ddfd',
|
||||
'300': '#a4cafe',
|
||||
'400': '#76a9fa',
|
||||
'500': '#3f83f8',
|
||||
'600': '#1c64f2',
|
||||
'700': '#1a56db',
|
||||
'800': '#1e429f',
|
||||
'900': '#233876',
|
||||
},
|
||||
indigo: {
|
||||
'50': '#f0f5ff',
|
||||
'100': '#e5edff',
|
||||
'200': '#cddbfe',
|
||||
'300': '#b4c6fc',
|
||||
'400': '#8da2fb',
|
||||
'500': '#6875f5',
|
||||
'600': '#5850ec',
|
||||
'700': '#5145cd',
|
||||
'800': '#42389d',
|
||||
'900': '#362f78',
|
||||
},
|
||||
purple: {
|
||||
'50': '#f6f5ff',
|
||||
'100': '#edebfe',
|
||||
'200': '#dcd7fe',
|
||||
'300': '#cabffd',
|
||||
'400': '#ac94fa',
|
||||
'500': '#9061f9',
|
||||
'600': '#7e3af2',
|
||||
'700': '#6c2bd9',
|
||||
'800': '#5521b5',
|
||||
'900': '#4a1d96',
|
||||
},
|
||||
pink: {
|
||||
'50': '#fdf2f8',
|
||||
'100': '#fce8f3',
|
||||
'200': '#fad1e8',
|
||||
'300': '#f8b4d9',
|
||||
'400': '#f17eb8',
|
||||
'500': '#e74694',
|
||||
'600': '#d61f69',
|
||||
'700': '#bf125d',
|
||||
'800': '#99154b',
|
||||
'900': '#751a3d',
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
maxHeight: {
|
||||
'0': '0',
|
||||
xl: '36rem',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: [
|
||||
'hover',
|
||||
'focus',
|
||||
'active',
|
||||
'odd',
|
||||
'dark',
|
||||
'dark:hover',
|
||||
'dark:focus',
|
||||
'dark:active',
|
||||
'dark:odd',
|
||||
],
|
||||
display: ['responsive', 'dark'],
|
||||
textColor: [
|
||||
'focus-within',
|
||||
'hover',
|
||||
'active',
|
||||
'dark',
|
||||
'dark:focus-within',
|
||||
'dark:hover',
|
||||
'dark:active',
|
||||
],
|
||||
placeholderColor: ['focus', 'dark', 'dark:focus'],
|
||||
borderColor: ['focus', 'hover', 'dark', 'dark:focus', 'dark:hover'],
|
||||
divideColor: ['dark'],
|
||||
boxShadow: ['focus', 'dark:focus'],
|
||||
},
|
||||
plugins: [
|
||||
require('tailwindcss-multi-theme'),
|
||||
require('@tailwindcss/custom-forms'),
|
||||
plugin(({ addUtilities, e, theme, variants }) => {
|
||||
const newUtilities = {}
|
||||
Object.entries(theme('colors')).map(([name, value]) => {
|
||||
if (name === 'transparent' || name === 'current') return
|
||||
const color = value[300] ? value[300] : value
|
||||
const hsla = Color(color).alpha(0.45).hsl().string()
|
||||
|
||||
newUtilities[`.shadow-outline-${name}`] = {
|
||||
'box-shadow': `0 0 0 3px ${hsla}`,
|
||||
}
|
||||
})
|
||||
|
||||
addUtilities(newUtilities, variants('boxShadow'))
|
||||
}),
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user