Configuration
Make sure to correctly configure your project so that the framework dependencies work correctly.
typescript
// src/main.ts
import '/dist/style.css';
import 'path/to/your-own-css-stylesheet.css';
// ... another thingsjavascript
// tailwind.config.cjs
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
plugins: [],
theme: {
extends: {
colors: {
// put your product colors here
/**
* primary,
* secondary,
* accent,
* warning,
* danger,
* success,
* info
*/
},
},
},
presets: [
// here you can create your own presets to customize the project as you wish
// it is highly recommended to put your presets in /src/assets/presets/**.cjs
],
};How to create a preset (example)
typescript
// /src/assets/presets/screen-rewrite.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
sm: '540px',
md: '720px',
lg: '960px',
xl: '1140px',
},
},
};And import this on your tailwind.config.cjs file:
javascript
// tailwind.config.cjs
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
plugins: [],
theme: {},
presets: [require('./src/assets/presets/screen-rewrite.cjs')],
};Configuring PostCSS
Your postcss.config.js must be:
javascript
// postcss.config.js
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable no-undef */
module.exports = {
plugins: [
require('postcss-import')(),
require('tailwindcss/nesting'),
require('tailwindcss')('./tailwind.config.cjs'),
require('postcss-nested'),
require('autoprefixer'),
],
};