Tailwind CSS 快速升級 v4

Tailwind CSS v4 在2025年1月推出，主打在效能上有顯著的提升，配置也變得更簡便。依照指示一步一步來調整專案，可以簡單快速完成設定。

手動升級

1. 更新及安裝套件

安裝新版的 tailwindcss 和 @tailwindcss/postcss

npm install -D tailwindcss@4.1.12 @tailwindcss/postcss@4.1.12

兩個套件 autoprefixer和postcss 都可以從 package.json 中移除。

2. 調整 postcss.config.js

把新的套件設定放上去。

Before

export default {
  plugins: {
    "postcss-import": {}, // remove
    tailwindcss: {},      // remove
    autoprefixer: {},     // remove
  },
};

After

export default {
  plugins: {
    "@tailwindcss/postcss": {}, // new
  },
};

3. 移除 @tailwind

Before

@tailwind base;
@tailwind components;
@tailwind utilities;

After

@import "tailwindcss";

我的專案本來就沒有使用 @tailwind，因為 SASS 的 @import 準備棄用(參考資料)，因此使用 @use 也效果相同。

Before

@use 'tailwindcss/base';
@use 'tailwindcss/components';
@use 'tailwindcss/utilities';

After

@use "tailwindcss";

到這邊基本上就大功告成了，可以測試看看是不是都正常呢

自動升級

另外官方這次也有提供指令來進行升級：

npx @tailwindcss/upgrade

執行時目錄內不能有任何 unstaged files，否則不會進行任何操作。可以根據Terminal上的訊息了解到執行內容基本上相同。

因此除了專案配置以外的改變，需要再參考指南確認有哪些影響，如果有v3, v4之間不兼容的調整，需要手動修正這些地方。

同場加映，額外分享兩個這次的調整：

• Automatic content detection：過往會在tailwind.config.ts 內定義 content 偵測檔案範圍，v4不再依賴這個設定，可以大膽地把這些設定拿掉。當然!會自動忽略 .gitignore 內提及的範圍，來確保效能。
• First-party Vite plugin：Vite目前真的可以說是強勢的存在，v4也特地為它打造一個 plugin 取代 PostCSS，只要在 vite.config.ts 加入設定，就可以移除檔案 postcss.config.js 讓專案更乾淨。

CloudCannon 支援 Jekyll 網站後台管理CMS系統

With CloudCannon as your Jekyll CMS, you will have all the tools you need to create amazing static websites.

CloudCannon 是線上網站後台管理CMS系統，可以作為 Jekyll、HUGO等後台管理，除了提供圖形化操作介面新增文章，自動發布、排程的設定，也有免費的網域名(Domain) .cloudvent.net供即時瀏覽。

先註冊或使用 Github/Gitlab/Bitbucket 帳號登入，可以匯入已有的專案並支援雙向的同步，現在馬上開始！

輸入專案名稱：

選擇Github的同步的專案及分支：

編譯類型為Jekyll，其他安裝、編譯參數也在這邊設定。

完成後，可以看到後台。

這個測試網站是公開的，可以加上 Settings => Authentication 改用帳密登入。更多功能請參考 CloudCannon 官方文件。

Html 轉 Figma 的小工具 Figma Plugin匯入現有網站

Figma 如何匯入現有網站，可以使用 Figma to HTML, CSS, React & more! 快速解決！

可以先安裝 google chrome 的擴充功能、Figma的擴充功能，再到網站使用 google chrome 的擴充功能匯出 Json，並到 Figma 將檔案匯入。

成果雖然會和實際網站有些差別，但很方便。

Figma的擴充功能
https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-React-%26-more!

google chrome 的擴充功能
https://chrome.google.com/webstore/detail/html-to-figma/efjcmgblfpkhbjpkpopkgeomfkokpaim

操作方式：

[Vue.js] $ref 和 directive 操作 DOM 的兩種方式及範例

以下整理 Vue 兩種操作 DOM 的方法。程式碼內容是根據輸入的數字來決定 div 的高度，這些範例僅是方便了解使用的方式，不代表這類的需求適合使用。

一、自訂索引名 ($refs)

自訂索引名有點像是 id 一樣，假設在元件上設定 ref myBlock，就可以用 this.$refs.myBlock 取得 DOM 元素。

<template>
	<input
		v-model.number="heightModel"
		type="number">
	<div
		ref="myBlock"
		class="border border-danger">
		Block
	</div> 
</template>

<script>
export default {
	data() {
		return {
			height: 50,
		};
	},
	computed: {
		heightModel: {
			get() {
				return this.height;
			},
			set(height) {
				this.height = height;
				this.changeHeight(height);
			},
		},
	},
	mounted() {
		if (this.height) {
			this.changeHeight(this.height);
		}
	},
	methods: {
		changeHeight(height) {
			this.$refs.myBlock.style.height = `${height}px`;
		},
	}
}
</script>

二、自定義指令 (custom directive)

常用的 v-model 就是一種指令(directive)，你也可以自訂指令方便全域使用。若定義 focus，在 template 上就使用 v-focus：

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

同理，自定義一個 v-height，來改變元件的高度：

<template>
	<input
		v-model.number="height"
		type="number">
	<div
		v-height="height"
		class="border border-danger">
		Block
	</div> 
</template>

<script>
export default {
	directives: {
		height: (el, binding) => {
			el.style.height = `${binding.value}px`;
		},
	},
	data() {
		return {
			height: 50,
		};
	},
}
</script>

完整的範例請可以參考：

See the Pen Vue.js Reference ID VS Custom Directives by chenuin (@chenuin) on CodePen.

Asciidoctor 安裝及入門範例

Asciidoctor 是使用純文字編輯的文檔格式，與 Markdown 用途相近(用法比較)，利用特定的標記可以呈現為HTML、PDF等其他格式，可以根據排版的需求搭配css或模板進行輸出。上一篇「ubuntu18 + python2 文件編輯 AsciiDoc 安裝說明」提到的 AsciDoc 的進化版，AsciDoc 已經停止更新，目前 Asciidoctor 更活耀，常用在電子書或Git專案文件的撰寫。[使用手冊]

安裝

安裝 Asciidoctor(作業系統 Ubuntu 18)

sudo apt-get install -y asciidoctor

完成後可以確認安裝版本

asciidoctor --version
asciidoctor -V

簡易範例

1. 建立檔案
新增一個檔案 sample.adoc，內容：

.Sample document
====
Here's a sample AsciiDoc document:

[listing]
....
= Title of Document
Doc Writer
:toc:

This guide provides...
....

The document header is useful, but not required.
====

2. 輸出 html

asciidoctor sample.adoc

在同一個目錄下會產生同檔名的HTML檔案 sample.html

預設情況都是轉成html5，並搭配css3，如果想要轉成其他格式，可以加上 -b(--backend) 來指定：

// for *.xml
asciidoctor -b docbook sample.adoc

Custom Theme

預覽剛剛的 sample.html ，發現除了標題、內文等會自動加上顏色或背景，是預設套用的 css3成果：

可利用自訂的 css 來美化頁面，以 asciidoctor-skins 寫好的主題套用作為範例。下載：

git clone https://github.com/darshandsoni/asciidoctor-skins.git

重新輸出時，-a(--attribute) 加上 css 的路徑：

asciidoctor -a stylesheet=./asciidoctor-skins/css/notebook.css sample.adoc

// or
asciidoctor -a stylesheet=notebook.css -a stylesdir=./asciidoctor-skins/css sample.adoc

開啟畫面會套用新的 stylesheet，如下：

常用參數

除了上面提到的 -a 和 -b ，其他常見的選項：
1. 輸出檔名 -o

// -o, --out-file
asciidoctor sample.adoc -o mypage.html

2. 輸出路徑 -D

// -D, --destination-dir
asciidoctor sample.adoc -D pages

輸出檔案會在資料夾 /pages 內。

3. 僅輸出內容 -s

// -s, --no-header-footer
asciidoctor sample.adoc -o mypage.html

只會輸出html中 <body> 標籤裡的內容，方便用於嵌入式頁面。

更多參數可參考：
https://asciidoctor.org/docs/user-manual/#document-conversion

[css/scss] 語法整理如何區別CSS、SCSS和Sass

變數(Variables)

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

巢狀(Nesting)

SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Mixin

SCSS

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

Sass

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))

CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Extend/Inheritance

SCSS

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Sass

/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

CSS

/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

運算(Operators)

SCSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Sass

.container
  width: 100%


article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%

CSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

參考資料：
https://sass-lang.com/guide

[css/scss] 自適寬度的圖片(Responsive Image)-img隨div大小改變自行縮放

將同一張圖片不切割就能用不同的尺寸顯示，效果預覽如下：

這是利用照片當作背景，並以圖片的短邊為依據，不經剪裁就能以需要的比例呈現，利用css對背景圖片設定的支援功能，設定像是background-position，如果圖片過大時從哪個位置開始進行剪裁，以下為scss撰寫的原始碼。

首先，先準備一個Parent Class，『%』後面加上名稱，在編譯成css後不會看到這個class。

%responsive-image {
 display: flex;
 width: 100%;
 flex: 100%;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
}

接著設定一個image-1x1的class，使所有的圖片都能以1比1的比例顯示。

// H:1, W:1
.image-1x1{
 @extend %responsive-image;
 padding-bottom: percentage(1 / 1);
}

以此類推，如果需要顯示一個長300、寬400的圖片，請在括號內填入『(3/4)』，就能達到想要的效果！

在html裡面套用這個class。

<div class="image-1x1" style="background-image: url('https://picsum.photos/400/?image=318');"></div>

我搭配bootstrap的grid system寫了一個完整的範例，可以在codepen上找到[連結]，請參考：

See the Pen Responsive Image by chenuin (@chenuin) on CodePen.

[css/scss] 水平時間軸(Horizontal Timeline)範例及原始碼分享

水平時間軸

為了方便客製化，這次使用scss來寫，並把幾個重要的參數拉出來寫，其中比較重要的是$event-num，如果有4個項目的話，會用全部的長度均分，因此請依照自己實際使用去修改這個參數。

style.scss

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');

$line-color: #FA8072;  // 水平線的顏色
$point-color: #FF4500; // 圓點的顏色
$point-size: 16px;     // 圓點的大小(直徑) 
$half-point-size: $point-size/2;
$active-font-color: #FA8072;
$inactive-font-color: rgba(0, 0, 0, 0.5);
$event-num: 4;  // 圓點(項目)數量

#timeline {
  ol {
    position: relative;
    display: block;
    margin-top: 50px;
    margin-bottom: 100px;
    height: 1px;
    padding-inline-start: 0;
  }

  li {
    position: relative;
    display: inline-block;
    float: left;
    width: calc(100% /  #{$event-num});
    height: 1px;
    background: $line-color;
    color: $inactive-font-color;
    .diplome {
      text-align: center;
      margin-top: 20px;
    }
    .point {
      content: "";
      display: block;
      width: $point-size;
      height: $point-size;
      border-radius: 50%;
      border: 1px solid $point-color;
      background: #fff;
      position: absolute;
      top: -#{$half-point-size};
      left: calc(50% - #{$half-point-size});
    }
    .timestamp {
      font-size: 14px;
      text-align: center;
    }
    &.active>.point {
      border: $half-point-size solid $point-color;
    }
    &.active>.diplome,
    &.active>.timestamp {
      color: $active-font-color;
    }
  }
}

如果習慣看css的人，可以利用一些線上的轉換網站(如：sassmeister)轉換成css。

index.html

<div class="container">
  <div id="timeline">
    <ol>
      <li class="active">
        <span class="point"></span>
        <h6 class="diplome">My Birthday</h6>
        <p class="timestamp">2018/06/01</p>
      </li>
      <li class="active">
        <span class="point"></span>
        <h6 class="diplome">Father's Day</h6>
        <p class="timestamp">2018/08/08</p>
      </li>
      <li>
        <span class="point"></span>
        <h6 class="diplome">Helloween</h6>
        <p class="timestamp"></p>
      </li>
      <li>
        <span class="point"></span>
        <h6 class="diplome">Christmas</h6>
        <p class="timestamp"></p>
      </li>
    </ol>
  </div>
</div>

原始碼放在codepen上[連結]，歡迎參考：

See the Pen Horizontal Timeline by chenuin (@chenuin) on CodePen.

[Boostrap] 透過scss自訂個人風格的主題(Theme)

Bootstrap將常用的Navbar、Button等元件定義好css
可以讓前端的開發更加快速，是最多人使用的前端開發套件！

但有時boostrap的設定不合意要怎麼辦呢？
而且這麼多人使用bootstrap是不是有失個人風格呢？
這時你可以下載scss的版本來定義屬於自己的bootstrap模板喔！

請新建一個檔案加入bootstrap，第一種方法是把所有的元件都引用：

// Custom.scss
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

或者有時你只需要使用bootstrap部分的元件

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

以上二選一即可，另外還提供了bootstrap-grid、bootstrap-reboot兩種常用的部分元件集，像bootstrap-grid就是針對網頁排版的所有bootstrap元件集，在RWD的網站時非常便利。

接著，進入正題！例如btn-primary、text-primary等都是藍色(#007bff)，如果要自訂為粉紅色(#e83e8c)，請將重新定義的顏色寫在引用bootstrap之前，檔案內容如下：

// Custom.scss
$primary: #e83e8c;

@import "node_modules/bootstrap/scss/bootstrap";

所有的primary就會變成你定義的粉紅色(#e83e8c)，基本上所有的參數都能在_variables.scss找到原始的設定，只要加上你需要修改的參數，就可以輕鬆打造屬於你的bootstrap主題囉！

參考資料：
https://getbootstrap.com/docs/4.0/getting-started/theming/