Uma dúvida: Eu posso aplicar TAILWIND apenas no index. html ou posso aplicar em ''styles.css'' também?
Uma dúvida: Eu posso aplicar TAILWIND apenas no index. html ou posso aplicar em ''styles.css'' também?
hoje, com a Alura e o Google Gemini
Não entendi ao certo se é sobre a configuração do Tailwind que você está se referindo, mas caso seja, é possível sim, você pode aplicar Tailwind CSS tanto diretamente no arquivo index.html quanto no styles.css, dependendo de como você quer organizar o seu código.
Aplicação no index.html
No arquivo index.html, você pode incluir o Tailwind de forma inline, adicionando as classes diretamente nos elementos HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 text-center">
<h1 class="text-4xl font-bold text-blue-600">Hello, Tailwind!</h1>
</body>
</html>
Aplicação no styles.css
Você também pode aplicar o Tailwind no arquivo styles.css, que seria o caminho mais recomendado para organizar melhor os estilos personalizados. Aqui está como fazer:
1- Instale o Tailwind (caso ainda não tenha feito):
Se você está usando Tailwind CLI, por exemplo, adicione o Tailwind ao arquivo CSS com:
@tailwind base;
@tailwind components;
@tailwind utilities;
2- Configuração do arquivo styles.css:
Você pode adicionar qualquer estilo personalizado ou classes do Tailwind diretamente no arquivo styles.css e importar esse arquivo no index.html:
<link href="styles.css" rel="stylesheet">
Isso permite que você tenha uma melhor separação de responsabilidades, aplicando as classes Tailwind em um local centralizado e utilizando o poder do pré-processamento CSS, caso necessário.