# Instalando Tailwind e CSS no Next

Quando você cria um projeto Next utilizando o comando npx create-next-app@latest, aparecerá a opção Would you like to use Tailwind CSS?. Nesse caso, ao optar por Yes, Tailwind já será adicionado ao projeto.

Da mesma forma, ao criar um repositório com a stack que a Struct utiliza, a T3, por meio do comando npm create t3-app@latest, a CLI mostrará algumas opções que você pode escolher, incluindo Tailwind. Se optar por utilizá-lo no projeto, T3 configurará tudo automaticamente.

npm create t3-app@latest
? What will your project be called? (my-t3-app)
$ my-t3-app
? Will you be using JavaScript or TypeScript?
$ TypeScript
> Good choice! Using TypeScript!
? Which packages would you like to enable?
$ nextAuth, prisma, tailwind, trpc
? Initialize a new git repository? (Y/n)
$ No
> Sounds good! You can come back and run git init later.
? Would you like us to run npm install? (Y/n)
$ Yes
> Alright. We'll install the dependencies for you!

Em ambos os casos, as configurações são feitas utilizando app router, ao invés de pages router.

Caso você precise adicionar Tailwind manualmente, existem algumas formas, mas a mais simples é utilizar a CLI (Command Line Interface) do Tailwind.

Para instalar Tailwind usando sua CLI, use o seguinte comando no terminal:

npm install -D tailwindcss

Depois crie um arquivo chamado tailwind.config.js (ou .ts) por meio do comando npx tailwindcss init e adicione o seguinte código:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    // Aqui os caminhos dependerão se foi ou não escolhido o uso da pasta src no seu projeto
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

Por fim, adicione as diretivas do Tailwind ao seu arquivo de CSS global (src/app/globals.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Como um adicional de instalação, se você estiver usando VSCode como sua IDE, é extremamente útil instalar a extensão Tailwind CSS IntelliSense. Ela possui algumas features como auto-complete para os componentes Tailwind que você adiciona em seus componentes (aperte ctrl + [espaço] para abrir a lista de opções que você pode usar).

Para utilizar CSS Modules em sua aplicação next, basta criar arquivos com a extensão .module.css. Isso pode ser feito em qualquer pasta dentro de /app, e os arquivos CSS Modules criados podem ser importados em qualquer outro arquivo dentro dessa pasta, como a própria documentação exemplifica:

import styles from "./styles.module.css";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <section className={styles.dashboard}> {children} </section>;
}

.dashboard {
  padding: 24px, ...;
}

Lembrando que CSS Modules são opcionais e atuam em escopo local, o que significa que podem evitar conflitos de nomeclatura de classes em arquivos de estilo diferentes.