Integrated tailwindccs

Using tailwind in an integrated way

2023-03-11

Written by: tdtc

cd veic-web_asp
npm init -y
npm install tailwindcss @tailwindcss/cli

gen

npx @tailwindcss/cli -i ./wwwroot/css/site2.css -o ./wwwroot/css/site2tw.css --optimize
npx @tailwindcss/cli -i ./wwwroot/css/site2-legacy.css -o ./wwwroot/css/site3tw.css --optimize

About input file:

new

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" prefix(tw);

legacy

cd gen-config-dir
npm install -D tailwindcss@3 postcss autoprefixer

npx tailwindcss init -p

tailwind.config.js:

module.exports = {
    content: ["./**/*.html"],
    prefix: "tw",
    important: true,
    corePlugins: {
        preflight: false,
    }
}
@config "../../tailwind.config.js";
@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css";

Ref