ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-02-16 09:01:47  阅读:280  来源: 互联网

标签:scss wwwroot sass start tailwindcss 脚手架 css


这是一个基于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/

 

标签:scss,wwwroot,sass,start,tailwindcss,脚手架,css
来源: https://www.cnblogs.com/wxb8/p/15898899.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有