Custom Tailwind CSS
To use Tailwind VS Code Intellisense, your project needs Tailwind dependencies.
pnpm install -D tailwindcss postcss autoprefixer @tailwindcss/typography
You will also need your own /src/tailwind.config.js
. Note the use of commonjs require
(not ESM import
). E.g.
let defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
let config = {
content: ['./src/**/*.{html,js,svelte,ts}'],
plugins: [require('@tailwindcss/typography')],
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
display: ['Lexend', ...defaultTheme.fontFamily.sans],
logo: ['Oxanium', ...defaultTheme.fontFamily.sans]
},
},
},
}
Custom Fonts
You can provide your own list of font faces in src/static/fonts.css
and add the fontFamily
names into your tailwind.config as shown above.
Default fonts.css
@font-face {
font-family: 'Lexend';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(/fonts/lexend.woff2) format('woff2');
}
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: block;
font-style: normal;
font-named-instance: 'Regular';
src: url('/fonts/Inter-roman.var.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: block;
font-style: italic;
font-named-instance: 'Italic';
src: url('/fonts/Inter-italic.var.woff2') format('woff2');
}
@font-face {
font-family: 'Oxanium';
font-weight: 200 800;
font-display: swap;
font-style: normal;
src: url(/fonts/oxanium.woff2) format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}