Pular para o conteúdo principal

Tailwindcss - Estilos no expo

Instalação e configuração de estilos​

https://www.nativewind.dev/getting-started/typescript

https://www.nativewind.dev/quick-starts/expo

1. Instalação dos pacotes​

yarn add nativewind
yarn add --dev tailwindcss@3.3.2

2. Inicialização da biblioteca​

npx tailwindcss init

3. Confirure o arquivo do tailwind​

ESSA CONFIGURAÇÃO É PARA PROJETOS QUE POSSUEM A PASTA SRC/APP

// tailwind.config.js

// tailwind.config.js

module.exports = {
- content: [],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Modifique o arquivo de configuração do babel​

essa configuração e aplicada somente se você instalou o expo-router

// babel.config.js

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
+   plugins: ["nativewind/babel"],
  };
};

5. configuração para habilitar a inteligencia e os tipos no vscode​

**Reinicie o vscode

1 . Crie uma pasta em "./@types" 2. crie um arquivo dentro da pasta "app.d.ts" 3. adicione o texto

/// <reference types="nativewind/types" />
  1. altere o arquivo tsconfig.json
(...)

  "include": [
    "**/*.ts",
    "**/*.tsx",
    
  + "./src/@types/*",    
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]

(...)

  • se é um instalação em branco o seu arquivo final tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "./@types/*",  
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]
}


03. Executando a aplicação​

É muito importante que execute a aplicação para ver se acontece algum tipo de erro.

npx expo start -c

CASO ACONTECA ALGUM ERRO​

yarn remove nativewind yarn remove tailwindcss yarn add postcss@8.4.23 yarn add --dev tailwindcss@3.3.2 yarn add nativewind