typescript - Tailwind CSS სტილები არ ჩანს Svelte აპლიკაციაში

მე შევქმენი Svelte აპლიკაცია გამოყენებით „npm create vite@latest“, არჩევით Svelte-ს და TypeScript-ს. მე ვიყენებ Vite-ს სერვერად, ასევე დავაყენე TailWind CSS აქ მითითებული ინსტრუქციის მიხედვით.

ჩემი tailwind.config.cjs კოდი:

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

ჩემი მიმდინარე app.css კოდი:

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

მე მაქვს შექმნილი routes ფოლდერი src ფოლდერის შიგნით, რომლის კოდი არის:

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

<slot />

მე ვ მიიღებ ამ შეცდომას:

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

მე გავაჩერე სერვერი და კვლავ გავუშვი, იგივე პრობლემებით. კონტენტ დირექტორიას ვამოწმებდი მილიონჯერ, რაღაც კონკრეტული ფაილის გზაც კი ვცადე. არ მახერხდება მისი მუშაობის უზრუნველყოფა. ვინმე შეგიძლიათ დამეხმაროთ ამ საკითხში? ასევე დავამატე ჩემი სამუშაო ფოლდერის სურათი. ნამდვილად ვაფასებ ნებისმიერ რჩევას. სამუშაო ფოლდერი

მოსახელებულია ზედა ნაწილში; არ ვიცი რას ვუშავ ცუდად, ბევრი დოკუმენტაციის კითხვისა და უსასრულო ვიდეოების ყურების შემდეგ. განვითარებისთვის, ვისთანაც ვმუშაობ, იყენებენ Svelte-ს, TS-ს და Tailwind CSS-ს, წინააღმდეგ შემთხვევაში მე ვცდებოდი სხვა მეთოდით.

პასუხი #1

ჩავა თქვენ გაქვთ Vite webapp ფოლდერში, ეს იქნებოდა პროექტის „-root“ მის აშენებას/კომპილაციას რაღაც თვალსაზრისით. განიხილეთ postcss.config.js და tailwind.config.cjs ფაილების webapp ფოლდერში გადატანა.

ამის შემდეგ, განიხილეთ content-ის გზების შეცვლა tailwind.config.cjs-ში ისეთით, როგორიცაა:

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

დარწმუნდით, რომ აღინიშნება vite კომანდა webapp ფოლდერის შიგნიდან.