• `☐` para **undone**
• `▣` para **studying**
• `▨` para **done**

🌬️ tailwind css

• ▨ · instalação com postcss, vite, next ou create-react-app
• ▨ · classes utilitárias (`bg-`, `text-`, `p-`, `m-`, etc.)
• ▨ · responsive design com breakpoints (`sm:`, `md:`, etc.)
• ▣ · customização com `tailwind.config.js`
• ☐ · uso de `@apply` para compor estilos
• ▣ · variantes de estado (`hover:`, `focus:`, `disabled:`)
• ☐ · dark mode (`dark:`)
• ▣ · animações com `transition`, `duration`, `ease`
• ☐ · plugins e extensões (forms, typography, etc.)
• ☐ · organização com components e partials

🎨 scss / sass

• ▣ · variáveis (`$cor-principal`, etc.)
• ☐ · nesting de seletores
• ☐ · mixins e `@include`
• ▣ · funções (`@function`)
• ▣ · `@extend` e placeholders
• ▣ · uso de `&` para estados (`&:hover`, `&.ativo`)
• ☐ · partials com `_arquivo.scss` + `@use` ou `@import`
• ☐ · estrutura 7-1 ou modular
• ☐ · controle com `@if`, `@each`, `@for`
• ▣ · uso com frameworks como bootstrap ou tailwind

🛠️ postcss

• ☐ · função principal: processador de css com plugins
• ☐ · configuração com `postcss.config.js`
• ▣ · uso com tailwind (`tailwindcss` plugin)
• ☐ · autoprefixer (prefixos automáticos para navegadores)
• ☐ · nesting com `postcss-nested`
• ☐ · minificação com `cssnano`
• ☐ · importações com `postcss-import`
• ▣ · integração com vite, webpack ou next.js
• ☐ · criação de pipeline css moderna
• ▣ · flexível com frameworks e bibliotecas

💅 styled-components

• ▨ · instalação (`npm install styled-components`)
• ▣ · template literals e estilos por componente
• ▨ · props dinâmicas (`props => props.active ? ...`)
• ▨ · temas com `themeprovider`
• ▨ · global styles com `createglobalstyle`
• ▣ · animações com `keyframes`
• ▨ · escopo isolado por componente
• ▨ · uso com react e react native
• ▨ · composição de componentes estilizados
• ☐ · styled-components + typescript (tipagem de tema e props)

📦 css modules

• ▨ · arquivos com `.module.css` ou `.module.scss`
• ▨ · importação de estilos como objeto (`styles.botao`)
• ▨ · escopo local por padrão
• ▨ · combinação com lógica (`className={styles.x}`)
• ▨ · uso com next.js, vite, react
• ☐ · integração com sass (`.module.scss`)
• ▣ · menos risco de conflitos de nome
• ▣ · organização por componente
• ▣ · flexível para projetos pequenos ou grandes
• ▣ · bom para separar lógica de estilo, mantendo modularidade