Day-24 : 开发时,使用到tailwindCSS,今天来讲安装

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

安装完整功能

yarn tailwindcss init

产生一个预设值的配置档 tailwind.config.js 在你的专案根目录
创建一个资料夹/app/javascript/styles
把跟目录下 tailwind.config.js 增加下面内,启动jit mode

module.exports = {
mode: 'jit'
purge: [
'./app//*.html',
'./app/helpers/
/.rb',
'./app/views/**/
.html.erb',
'./public//*.html',
'./app/
/*.{js,jsx,ts,tsx,vue}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: []
}

/app/javascript/styles 里面再创一个 application.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/app/javascript/styles 里面再创一个 index.js

// 添加这行
import "./application.scss"

到 /app/javascript/packs/application.js

// 添加这行
import "styles"

到 /app/views/layouts/application.html.erb

// 更改stylesheet_tag为stylesheet_pack
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

根部录下 postcss.config.js

// 添加这2行
require("tailwindcss"),
require("autoprefixer"),


<<:  Day 23:儿子有事交给爸-$emit 传出事件

>>:  Day 26 UserDefault

Day51. 职责链模式

本文同步更新於blog Chain Of Responsibility Pattern 使多个物件...

Day 19 [Python ML、资料视觉化] Seaborn介绍

import pandas as pd import matplotlib.pyplot as pl...

Day 25 | Livewire 实作 购物网站(四): 结帐页面

购物网站能加入购物车後,就只剩结帐功能啦!!不过串接金流的方面与本主题较无关,所以这边只会做完结帐的...

Day 7 Functions

今天要来对 function 来做深入一点的介绍。 如果想要把 function 存在变数里,可以对...