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

基于sass tailwindcss的传统页面开发脚手架的更多相关文章

  1. 基于vue-cli的改造的多页面开发脚手架

    项目的GitHub地址:https://github.com/hellobajie/vue-cli-multipage 该脚手架同时支持vux,scss,less 目录结构 vue-cli-multi ...

  2. 基于Vue2.0的单页面开发方案

    2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...

  3. X5的UI部分和传统Web页面开发的差异

    http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...

  4. 基于weex的app开发脚手架weexplus学习笔记

    认识weexplus weexplus是基于weex官方的二次开发版本,weex和react native一样同属第2代跨平台技术,解决了第一代性能低下,体验不好的问题,同时保留了第一代 多平台一套代 ...

  5. 基于.NetCore开发博客项目 StarBlog - (6) 页面开发之博客文章列表

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  6. 基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  7. AgileBoot - 基于SpringBoot + Vue3的前后端快速开发脚手架

    AgileBoot 仓库 后端地址:https://github.com/valarchie/AgileBoot-Back-End 技术栈:Springboot / Spring Security / ...

  8. Gumby – 基于 Sass 的灵活的,响应式 CSS 框架

    Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架.可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型. 您可能感兴趣的相关文章 35个让人惊讶的 ...

  9. 基于NodeJS的全栈式开发

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的 NodeJS,试 ...

  10. 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...

随机推荐

  1. mysql主从复制详细部署

    1.异步复制:这是MySQL默认的复制模式.在这种模式下,主库在执行完客户端提交的事务后会立即将结果返回给客户端,并不关心从库是否已经接收并处理.这种模式的优点是实现简单,但缺点是如果主库崩溃,已经提 ...

  2. 写代码被大语言模型坑之使用LocalDateTime比较两个时间差了几天

    自从去年ChatGPT3.5发布后使用了几次,现在写代码基本上离不开它和它的衍生产品们了.一方面查资料很方便,快速提炼要点总结:另一方面想写什么样的代码一问就能生成出来,功能大差不差,稍微改改就能用, ...

  3. JavaScript对象获取属性的方法(.和[]方式)

    js对象获取属性有两种方法:1.通过.的方式  2. 通过[]方式 // 通过.方式获取属性值,key是静态的 var aa = {name: "zhang", age: 18}; ...

  4. Oracle的用户如何优雅地达成软件合规目标

    企业一旦发展到了一定规模,就会衍生软件100%合规正版化的需求. 而对于使用到Oracle的用户,当然,具体核定的购买数量和off等商务问题,需要客户管理层直接和对应的Oracle销售代表进行商务谈判 ...

  5. 什么DevOps方法论?

    最近项目组事情越来越多,人员管理和项目事项管理成为了重点关注的问题,无意间听到同事间讨论DevOps方法论可以有效提升项目管理能力,实现组织精益化管理,运维一体化.于是我上网查了一下"Dev ...

  6. 利用 canvas 实现签名效果

    利用 canvas 实现签名效果 使用插件  jSignature  github:https://github.com/brinley/jSignature 如果再H5 中使用需要加载  flash ...

  7. Nuxt.js 应用中的 prepare:types 事件钩子详解

    title: Nuxt.js 应用中的 prepare:types 事件钩子详解 date: 2024/11/8 updated: 2024/11/8 author: cmdragon excerpt ...

  8. Java net.sf.jxls 生成模板 并导出excel

    如果是 maven项目需要引入下面这个就可以 <dependency> <groupId>net.sf.jxls</groupId> <artifactId& ...

  9. Postman 汉化教程

    Postman 汉化教程(Postman中文版) 迷恋自留地 postman官网下载地址 https://www.postman.com/downloads/ postman汉化包 https://g ...

  10. 探索 Spring AOP:全面解析与实战应用

    在现代 Java 开发领域,Spring 框架无疑占据着重要地位,而 Spring AOP(Aspect-Oriented Programming,面向切面编程)作为 Spring 框架的关键特性之一 ...