基于sass tailwindcss的传统页面开发脚手架

这是一个基于sass和tailwindcss的快速开发传统多页面的npm脚手架。

package.json#

{
    "name": "sass-tailwindcss-start",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "concurrently 'npm:start-sass' 'npm:start-tailwindcss' 'npm:start-dotnet'",
        "build": "npm run build-sass && npm run build-tailwindcss",
        "start-dotnet": "dotnet watch",
        "start-tailwindcss": "npx tailwindcss -i ./wwwroot/scss/style.css -o ./wwwroot/css/style.css -w",
        "build-tailwindcss": "npx tailwindcss -i ./wwwroot/scss/style.css -o ./wwwroot/css/style.css -m",
        "start-sass": "sass ./wwwroot/scss/index.scss ./wwwroot/scss/style.css -w",
        "build-sass": "sass ./wwwroot/scss/index.scss ./wwwroot/scss/style.css"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "autoprefixer": "^10.4.2",
        "concurrently": "^7.0.0",
        "postcss": "^8.4.6",
        "sass": "^1.49.7",
        "tailwindcss": "^3.0.22",
        "@tailwindcss/forms": "^0.4.0",
        "@tailwindcss/line-clamp": "^0.3.1"
    }
}

tailwind.config.js#

module.exports = {
    content: ["./Pages/**/*.cshtml"],
    theme: {
       extend: {},
    },
    plugins: [require("@tailwindcss/line-clamp"), require("@tailwindcss/forms")],
};

 

推荐一个基于Tailwindcss和bootstrap动效的基础开发库：

https://tailwind-elements.com/quick-start/