Es posible usar la instrucción @import de CSS para poder importar cualquier contenido que tengas en archivos separados.
@import './components/button.css';
@import './components/navigator.css';
@import es una instrucción CSS estándar, por lo que no tendrás inconveniente en usarla en cualquier navegador.
El problema que quizás te puedes encontrar en el uso de los @import de CSS es que cada archivo importado produce una solicitud HTTP, como ocurre con las imágenes o los archivos externos cargados desde el HTML. Esto en principio no es mucho problema actualmente, ya que HTTP/2 tiene un comportamiento optimizado en las conexiones TCP y puede transferir varios archivos en la misma conexión, por eso no te penaliza tanto tener muchos @import a archivos distintos. Sin embargo, se suele considerar una mala práctica.
La recomendación cuando usas @import es que hagas un procesamiento previo del CSS para generar un único archivo con el código de todo tu CSS como compilado. Como Tailwind está basado en PostCSS, puedes usar perfectamente “postcss-import” que es un plugin de PostCSS que permite unir todos los import en un único archivo de salida.
En la página dedicada a PostCSS puedes aprender a usar el plugin de postcss-import.
Como Tailwind se tiene que procesar con su correspondiente plugin, y el orden de los plugins de PostCSS importa, lo recomendable es en el archivo postcss.config.js primero invocar el plugin de importado de los CSS y luego el plugin de Tailwindcss.
Archivo postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
]
}
Con esto, cada vez que se procese el CSS, se unirán todos los CSS importados y finalmente se procesará TailwindCSS.