Convertiré diseños de Figma, PSD, xd a nextjs, svelte, tailwindcss

Tailwind CSS es fácil de personalizar. Este es el marco CSS que proporciona toda la personalización en un solo archivo donde puede agregar colores, fuentes, utilidades, fondos, sombras y consultas de medios personalizados. Tailwind CSS proporciona la mejor solución para crear componentes HTML complejos.

Este es un proceso sencillo. Tailwind CSS proporciona un archivo de configuración predeterminado "Tailwind.config.js" donde puede agregar o anular las utilidades. Necesitamos usar la sección de temas para agregar nuevas utilidades y mantener las existentes. De lo contrario, escriba este fuera de la sección del tema para anular el existente.

Podemos agregar colores personalizados con el mismo nombre, por ejemplo, rojo, azul, verde, morado, lima, verde azulado, rosa, etc. pero necesitamos agregar colores en la sección de temas.

Sí, puedes usar utilidades adicionales o configurar complementos recomendados y compatibles con Tailwind CSS, por ejemplo, “@tailwindcss/forms” “@tailwindcss/line-clamp”

Sí, podemos agregar un valor personalizado a una clase directamente en la página HTML, incluso si será un valor calculado pero definido por Tailwind CSS. Por lo tanto, debemos usar la misma fórmula que describe Tailwind CSS, por ejemplo:<div class=”w-[calc(100%-20px)] px-5”> Viento de cola CSS</div>

Sí, podemos reducir el peso de Tailwind CSS y podemos aumentar la velocidad de carga de la página. Necesitamos algún filtro CSS como postCSS, purgeCSS, autoprefixer, CSSnano, etc.

Sí, TailwindCSS se puede utilizar con cualquier marco de desarrollo web. por ejemplo, pila completa (MERN Stack, React.JS, Vue.JS, Angular.JS, Svelte.JS) WordPress, Laravel, etc.

Sí, TailwindCSS admite SASS y puedes escribir CSS personalizado en el archivo SASS, pero necesitamos importar Tailwind Utilities. @Tailwind base; @Tailwind componentes; @Tailwind utilidades;

Sí, puedes agregar CSS personalizado en el archivo Tailwind CSS/SCSS incluso si puedes usar la clase Tailwind directamente en el archivo Tailwind CSS/SCSS agregando la variable @apply. por ejemplo .card{ @apply px-5 py-2 text-black font-bold md:font-normal; Background-img:url('image-path'); }

Sí, podemos agregar consultas de medios personalizadas en Tailwind CSS que brindarán soporte adicional para un dispositivo específico. Pero mi recomendación es que escribas todas las consultas de medios nuevamente fuera de la sección del tema en “Tailwind.config.js”.