Fil- och mapporganisation
Strukturera era CSS-entrypunkter, komponentstylesheet och konfigurationsfiler tydligt när projekten växer bortom en enda fil.
Fil- och mapporganisation är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Varför filorganisation är viktig
När Tailwind-projekt växer ökar antalet filer som rör CSS-relaterad konfiguration — Tailwind-konfigurationen, PostCSS-konfigurationen, globala stilmallar och CSS på komponentnivå. Utan en tydlig struktur sprids dessa filer över projektet och blir svåra att hitta. God filorganisation gör det omedelbart tydligt var nya värden ska läggas till, var globala åsidosättningar finns och vilken CSS som hör till vilken komponent.
Konfigurationsfiler på rotnivå
Konfigurationsfiler som påverkar hela bygget — tailwind.config.js, postcss.config.js och .prettierrc — ligger i projektroten tillsammans med package.json. De ligger på rotnivå eftersom byggverktyg hittar dem enligt konvention. Placera dem aldrig i src/ om inte verktygskedjan uttryckligen stöder konfigurationsidentifiering utanför roten.
my-project/
├── tailwind.config.js # ← root level
├── postcss.config.js # ← root level
├── .prettierrc # ← root level
├── package.json
├── src/
│ ├── styles/
│ │ └── globals.css # @tailwind directives
│ └── components/Styles-katalogen
Placera alla CSS-filer i en särskild katalog: src/styles/. Huvudingången är globals.css, som innehåller de tre @tailwind-direktiven, @layer-åsidosättningar för baselement och importer för ytterligare stilmallar. Komponentspecifik CSS placeras i separata filer som button.css eller prose-overrides.css, vilka importeras i globals.css.
src/styles/
├── globals.css # main entry: @tailwind base/components/utilities
├── base.css # @layer base: html, body, heading resets
├── components.css # @layer components: .btn, .card, .badge
├── utilities.css # @layer utilities: custom utility helpers
└── prose-overrides.css # @tailwindcss/typography customizationsStrukturen i globals.css
Filen globals.css är ingångspunkten som importeras i programmets rot. Den deklarerar de tre Tailwind-direktiven i rätt ordning och importerar sedan eventuella ytterligare stilmallar. Undvik att lägga anpassade stilar direkt i den här filen utöver direktiven — håll anpassade lagerdeklarationer i egna filer som importeras här, så blir strukturen tydligare.
/* src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Import custom layer files */
@import './base.css';
@import './components.css';
@import './utilities.css';Samplacering av komponent-CSS
För komponentbaserade ramverk som React eller Vue kan du placera en liten CSS-fil bredvid komponentfilen när stilarna är tätt kopplade till komponenten. I Tailwind-projekt är detta dock ovanligt, eftersom det mesta av formateringen finns direkt i markupens klassnamn. Begränsa samplacerad CSS till stilar som verkligen inte kan uttryckas med utilities — till exempel komplexa :focus-within-selektorer eller @keyframes.
src/components/
├── Button/
│ ├── Button.tsx
│ └── Button.module.css # Only if truly needed beyond Tailwind
├── Card/
│ ├── Card.tsx
│ └── Card.test.tsx
└── Modal/
└── Modal.tsx # No CSS file — pure Tailwind utilitiesSeparera temaexpansioner
När tailwind.config.js blir stor kan du flytta objektet theme.extend till en separat fil som theme/extend.js. Då förblir rotkonfigurationsfilen kort och lättläst, medan temafilen kan växa efter behov. Importera expansionen och använd spread-operatorn för att lägga tillbaka den i huvudkonfigurationen.
// theme/extend.js
module.exports = {
colors: {
brand: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' },
},
fontFamily: {
display: ['Inter', 'sans-serif'],
},
spacing: {
18: '4.5rem',
128: '32rem',
},
};
// tailwind.config.js
const themeExtend = require('./theme/extend');
module.exports = {
content: [...],
theme: { extend: themeExtend },
plugins: [...],
};Separera plugin-konfiguration
Om projektet använder flera Tailwind-plugins och varje plugin kräver omfattande konfiguration kan du flytta plugin-konfigurationerna till egna filer i en plugins/-katalog. Varje fil exporterar en konfigurerad plugin och importeras i huvudkonfigurationens array plugins. Då blir det enkelt att se vilka plugins som är aktiva och att justera deras inställningar oberoende av varandra.
plugins/
├── typography.js # require('@tailwindcss/typography')({...})
├── forms.js # require('@tailwindcss/forms')({strategy:'class'})
└── custom-utils.js # custom plugin function
// tailwind.config.js
module.exports = {
plugins: [
require('./plugins/typography'),
require('./plugins/forms'),
require('./plugins/custom-utils'),
],
};Organisera tokenfiler
Design tokens — färger, typografi och avstånd — definieras bäst i en separat tokens/-katalog i stället för direkt i Tailwind-konfigurationen. Varje kategori av tokens placeras i en egen fil: tokens/colors.js, tokens/typography.js, tokens/spacing.js. Dessa filer kan delas av designverktyg, Storybook-konfigurationer och Tailwind-konfigurationen samtidigt.
tokens/
├── colors.js # { primary: '#3b82f6', surface: '#ffffff', ... }
├── typography.js # { fontFamily: { sans: ['Inter', ...] }, ... }
└── spacing.js # { 18: '4.5rem', 128: '32rem', ... }
// tailwind.config.js
const colors = require('./tokens/colors');
const typography = require('./tokens/typography');
module.exports = {
theme: {
extend: { colors, ...typography },
},
};Globmönster för innehåll
Håll globmönster för innehåll organiserade och lättlästa. Gruppera dem efter filtyp och plats i stället för att skriva ett enda allomfattande globmönster som genomsöker för brett. Kommentera varje globmönster för att förklara vilken del av projektet det omfattar. Underhåll listan aktivt — ta bort gamla mönster när kataloger byter namn eller tas bort och lägg till nya mönster när nya filtyper introduceras.
// tailwind.config.js
content: [
// Pages and layouts
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/layouts/**/*.{js,ts,jsx,tsx}',
// UI components
'./src/components/**/*.{js,ts,jsx,tsx}',
// Public HTML files
'./public/**/*.html',
// Email templates (if any)
'./emails/**/*.{js,ts,jsx,tsx}',
],Namngivningskonventioner för CSS-lager
När du använder @layer för att lägga till anpassade stilar bör du följa en konsekvent namngivningsstrategi. Använd @layer base för återställningar på elementnivå (till exempel a, h1 och input), @layer components för mönster med flera utilities och meningsfulla namn (.btn, .card) samt @layer utilities för utilities med ett enda syfte som inte ingår i Tailwinds standarduppsättning. Blanda aldrig dessa ansvarsområden.
/* src/styles/base.css */
@layer base {
html { @apply scroll-smooth; }
h1 { @apply text-4xl font-extrabold; }
a { @apply text-blue-600 hover:text-blue-700; }
}
/* src/styles/components.css */
@layer components {
.btn { @apply rounded-lg px-4 py-2 font-semibold; }
}
/* src/styles/utilities.css */
@layer utilities {
.text-balance { text-wrap: balance; }
}README för stilkonventioner
Dokumentera fil- och mappstrukturen i projektets README eller i en särskild STYLE_GUIDE.md. Ta med ett diagram över katalogen src/styles/, förklara vilken fil varje typ av stil ska placeras i och ange vem som ansvarar för att underhålla globmönstren för innehåll. Nya utvecklare ska kunna förstå var de lägger till en ny anpassad färg eller en ny komponentklass genom att läsa en enda dokumentationssida.
# CSS Architecture
## File Map
- `tailwind.config.js` — theme tokens, content globs, plugins
- `src/styles/globals.css` — entry point, @tailwind directives
- `src/styles/base.css` — element resets in @layer base
- `src/styles/components.css` — .btn, .card, .badge in @layer components
- `tokens/colors.js` — brand color palette
## Adding a new custom utility
Add to `src/styles/utilities.css` inside `@layer utilities { }`. Snabbtest
Testa dina kunskaper om koncepten i Tailwind CSS Mastery från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde du dig att behålla konfigurationsfiler i projektroten för kompatibilitet med verktygskedjan, att organisera stilar i katalogen src/styles/ med separata filer för varje lager och att flytta temats tokens och plugins till särskilda filer när konfigurationen växer. Nästa steg är att utforska hur Tailwind kan samexistera med äldre CSS i befintliga projekt.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Fil- och mapporganisation” gratis?
Ja – hela texten till ”Fil- och mapporganisation” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Fil- och mapporganisation”?
Strukturera era CSS-entrypunkter, komponentstylesheet och konfigurationsfiler tydligt när projekten växer bortom en enda fil. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Fil- och mapporganisation”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Fil- och mapporganisation
- Samexistera med äldre CSS
- CSS Modules och Tailwind
- Skala Tailwind i monorepon