typescript - Estilos do Tailwind CSS não estão sendo renderizados em aplicativo Svelte

Eu configurei um aplicativo Svelte usando "npm create vite@latest", escolhendo usar Svelte e TypeScript. Estou usando o Vite como servidor, e também instalei o TailWind CSS conforme as instruções aqui.

Meu código tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./webapp/**/*.{svelte,html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Meu código atual do app.css:

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

Eu criei uma pasta de rotas dentro da pasta src cujo código é:

<script>
  import "../app.css";
</script>

<slot />

Continuo recebendo este erro:

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

Eu parei o servidor e o executei novamente, com os mesmos problemas. Já verifiquei o diretório de conteúdo um milhão de vezes, até tentando usar caminhos de arquivo específicos. Não consigo fazê-lo funcionar. Alguém pode me ajudar com isso? Também incluí uma imagem da minha pasta de trabalho. Agradeço muito qualquer orientação fornecida. pasta de trabalho

Mais ou menos descrito acima; não tenho certeza do que estou fazendo de errado depois de ler muita documentação e assistir a inúmeros vídeos. Os desenvolvedores com os quais estou trabalhando estão usando Svelte, TS e Tailwind CSS, caso contrário eu tentaria uma abordagem diferente.

Resposta #1

Como você tem o Vite na pasta webapp, esse seria o "raiz" do projeto em termos de sua construção/compilação. Considere mover o postcss.config.js e o tailwind.config.cjs para a pasta webapp.

Então, considere alterar os caminhos content em tailwind.config.cjs para algo como:

module.exports = {
  content: ['./src/**/*.{svelte,html,ts}'],

Certifique-se de executar o comando vite de dentro da pasta webapp.