
Juan Esteban Munoz
PreguntaPregunta… en un proyecto puede co-existir tanto tailwind como CSS nativo en otra hoja de estilos y enlazarla?

Said Alejandro Rosas Vera
Se podría, pero Tailwind directamente desaprueba esto debido a que se pierde el enfoque del framework, la idea es no salir del markup (Html). Pero, en caso de que sea totalmente necesario, si, se podrían agregar los estilos en la misma hoja donde agregaste las directivas de @tailwind. Si haces esto, te recomiendo usar la directiva @layer (esto te permite añadir reglas de estilos al final de alguna de las directivas que importaste), de esta manera:
@tailwind base; @tailwind components; @tailwind utilities; @layer components { .componente { @apply text-red-100; } }
Esto básicamente lo que hace es añadir las reglas que coloques dentro AL FINAL del bloque en el que decidiste que van a pertenecer, en este caso, en la hoja compilada vas a poder notar que .componente estaría declarado después de components pero antes que utilities. Ahora, podrás estarte preocupando, ¿por qué no simplemente colocamos los estilos después de @tailwind components? Bueno, principalmente porque es una buena práctica, además de que es más tedioso en caso de que la cantidad de estilos que escribas entre estas directivas sea mucho porque las tres directivas deberían permanecer juntas. Igualmente, una recomendación es que si escribirás directamente desde las hojas de estilo uses la directiva @apply para poder insertar utilidades de Tailwind ahí mismo, a continuación de ilustro un ejemplo:
.componente { @apply text-sm text-red-100 font-thin; }
Ahora, otra vez te podrías estar haciendo una pregunta, ¿por qué no simplemente escribimos reglas Css nativamente? Bueno, el principal objetivo de Tailwind es mantener un "design system" que en palabras fáciles significa mantener una uniformidad donde si a un componente la asignamos la clase font-thin tenga el mismo valor que cualquier otro elemento donde esta clase es aplicada, digo esto porque muchas veces solemos descartar la uniformidad inconscientemente y hay elementos que tienen un, en este caso, font-weight distinto entre si aún cuando son elementos similares, esto porque se nos olvida los valores que debemos seguir (en casos donde los estilos son muy extensos). Espero esta explicación haya resuelto tú duda, quedo al pendiente de tú respuesta, ¡un saludo! :D