Buna katılıyorum ..
sineld Bunu yapmayın, zaten 10 usd fiyatı var. Satın alın ömür boyu kullanın.
Ben Tailwindi öğrenebilmek adına Dashcode satın aldım amacım gereksiz kodlardan arındırarak kendimce renk uyarlaması vs yaparak öğrenmek ama işin içinden çıkamadım bana pure tailwind gerek diye birde Vristo aldım nispeten daha iyi ama buda çok fazla özelleştirme içeriyor
tailwind.config dosyası
** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
container: {
center: true,
},
extend: {
colors: {
primary: {
DEFAULT: '#4361ee',
light: '#eaf1ff',
'dark-light': 'rgba(67,97,238,.15)',
},
secondary: {
DEFAULT: '#805dca',
light: '#ebe4f7',
'dark-light': 'rgb(128 93 202 / 15%)',
},
success: {
DEFAULT: '#00ab55',
light: '#ddf5f0',
'dark-light': 'rgba(0,171,85,.15)',
},
danger: {
DEFAULT: '#e7515a',
light: '#fff5f5',
'dark-light': 'rgba(231,81,90,.15)',
},
warning: {
DEFAULT: '#e2a03f',
light: '#fff9ed',
'dark-light': 'rgba(226,160,63,.15)',
},
info: {
DEFAULT: '#2196f3',
light: '#e7f7ff',
'dark-light': 'rgba(33,150,243,.15)',
},
dark: {
DEFAULT: '#3b3f5c',
light: '#eaeaec',
'dark-light': 'rgba(59,63,92,.15)',
},
black: {
DEFAULT: '#0e1726',
light: '#e3e4eb',
'dark-light': 'rgba(14,23,38,.15)',
},
white: {
DEFAULT: '#ffffff',
light: '#e0e6ed',
dark: '#888ea8',
},
},
fontFamily: {
nunito: ['Nunito', 'sans-serif'],
},
spacing: {
4.5: '18px',
},
boxShadow: {
'3xl': '0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)',
},
typography: ({ theme }) => ({
DEFAULT: {
css: {
'--tw-prose-invert-headings': theme('colors.white.dark'),
'--tw-prose-invert-links': theme('colors.white.dark'),
h1: { fontSize: '40px', marginBottom: '0.5rem', marginTop: 0 },
h2: { fontSize: '32px', marginBottom: '0.5rem', marginTop: 0 },
h3: { fontSize: '28px', marginBottom: '0.5rem', marginTop: 0 },
h4: { fontSize: '24px', marginBottom: '0.5rem', marginTop: 0 },
h5: { fontSize: '20px', marginBottom: '0.5rem', marginTop: 0 },
h6: { fontSize: '16px', marginBottom: '0.5rem', marginTop: 0 },
p: { marginBottom: '0.5rem' },
li: { margin: 0 },
img: { margin: 0 },
},
},
}),
},
},
plugins: [
require('@tailwindcss/forms')({
strategy: 'class',
}),
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
],
};
bu özel tanımlar olmasa h1 varsayılanı kullansa yada özel renk tanımlamaları olmasa anlaşılması kolay olur düzenlemeside tabi ,
Özelleştirmek istediğimde basit bir datatable'ı ayıklayarak kendinize uyarlamak zor oluyor ayrıca birçok componentin kendi css i yazılmış 20'nin üzerinde .css dosyası var ve bazıları gerçekten çok uzun ve detaylı
<template>
<div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
<!-- Basic -->
<div class="panel">
<div class="flex items-center justify-between mb-5">
örneğin burdaki <div class="panel"> panel hangi dosyada arattırıyo biraz . kanımca bütün hepsi gereğinden fazla kalabalık satış yapmak güzel göstermek adına 10'larca eklenti ve onlara ait css ler makyaj üzerine makyaj düzenlemesi zor oluyor. elimde hem dashcode hem vristo var tek yarımları bazı cardlar componentlerin claslarına bakıp UI Kit olarak kullanıyorum.
Not olarak birşey ekleyeyim 1 haftadır tailwindle uğraşıyorum ve şu tailwise.vercel'e biraz baktımda varya ben bakınca çok ciddi emek kan ve gözyaşı görüyorum bu tasarlayan adam kör olmuştur bence 🙂