Build complex ui's and ux's using ghostCSS, the next generation of css.
- Create a new vite app
$ npm init vite my-ghost-project
- Install dependencies
$ cd my-ghost-project
$ npm install -D postcss tailwindcss autoprefixer
- Create config
$ npx tailwindcss init -p
- Paste this in
tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./src/index.html', './src/*.{html,htm}', './src/**/*.{html,htm}'],
darkMode: 'media', // or 'media' or 'class'
theme: {
extend: {
zIndex: {
'top': '10000'
},
spacing: {
'128': '32rem',
'144': '36rem',
},
screens: {
'portrait': { 'raw': '(orientation: portrait)' },
'm2xl': { 'max': '1535px' },
'mxl': { 'max': '1279px' },
'mlg': { 'max': '1023px' },
'mmd': { 'max': '767px' },
'msm': { 'max': '639px' },
},
borderWidth: {
'1': '1px'
},
colors: {
'primary': {
'light': '#BFDBFE',
'DEFAULT': '#3B82F6',
'dark': '#1E40AF'
},
'secondary': '#6B7280',
'light': '#E5E7EB',
'dark': '#1F2937',
'success': {
'light': '#A7F3D0',
'DEFAULT': '#10B981',
'dark': '#065F46'
},
'danger': {
'light': '#FECACA',
'DEFAULT': '#EF4444',
'dark': '#991B1B'
},
'warning': {
'light': '#FDE68A',
'DEFAULT': '#F59E0B',
'dark': '#92400E'
},
'info': {
'light': '#CFFAFE',
'DEFAULT': '#22D3EE',
'dark': '#0E7490'
},
'special': {
'light': '#FECDD3',
'DEFAULT': '#F43F5E',
'dark': '#9F1239'
},
'tropic': {
'light': '#FED7AA',
'DEFAULT': '#F97316',
'dark': '#9A3412'
},
'tertiary': {
'light': '#E9D5FF',
'DEFAULT': '#A855F7',
'dark': '#6B21A8'
}
}
},
},
variants: {},
plugins: [],
}
paste this in index.css
(optional) paste this in index.js
$ npm run dev
Now your site is running!