---
title: "#2 Tailwind 安裝 | Lavuta：線上報修系統開發"
tags: 線上報修系統開發教學, laravel, vue2, tailwind, vue
---
#2 Tailwind 安裝 & 開啟 JIT 模式
==
上一篇建立好專案而且也跑過 Vue 了，那接下來就要開始碰到專案目前還沒接觸到的 Tailwind 。如果想跟著我一起完成這次進度的人，可以[按這裡去 Github 下載上次的進度][release]，而之後每次都會提供前一次的進度給需要的人練習。
安裝
--
其實安裝在 Laravel 的過程和安裝在其他地方都大同小異，唯一不同之處在於 webpack mix 的部分，而 Tailwind 本身就有推出[針對 Laravel 環境的安裝教學][tailwind-laravel]，如果想要了解如何在其他的專案安裝 Tailwind，也可以看看我的另一篇文章：[Tailwind 安裝流程 (使用npm)][tailwind-install-npm]，我這篇也會再講重講一次安裝，但不同的是會教大家如何==開啟 JIT 模式==。
:::danger
在安裝之前，特別警告一下，***NodeJS的版本必須在12版以上*** ，然後要***把終端機切到專案目錄之下再開始*** 執行指令嘿。
:::
首先是安裝 Tailwind 和另外兩個依賴的套件 ( 加上 @latest 所以會==幫你下載最新版== )
```shell==
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```
安裝應該不會出現問題，那麼接著就來產生 tailwind 的設定檔
```shell==
npx tailwindcss init
```
跑完之後專案目錄會多出一個叫做 `tailwind.config.js` 的檔案，這就是 Tailwind 的設定檔。接著打開這個設定檔開始進行設定。
```javascript==
//tailwind.config.js
module.exports = {
mode: "jit", //新增這行，就可以開啟 JIT 模式
purge: [
//將專案中所有會用到 Tailwind 樣式的檔案都包含進來
//這樣編譯時就會移除用不到的class，達到壓縮的效果
//不過其實有 jit 模式，這個的效用就不大了
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
```
設定完之後，為了讓 laravel 編譯時也能一起編譯 tailwind，我們要設定另一個叫做 `webpack.mix.js` 的檔案，因為我們的 ==Tailwind 要依賴 postcss 編譯==，所以要改成這樣：
```javascript==
//webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css')
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
//增加 .postCss .... 這段
```
sass留著是因為 laravel 預設產生的那些頁面用的都是 sass 裡面的樣式，為了測試方便，把原本的樣式保留，讓我們的 tailwind 樣式可以一起編譯進去。
再來，要開啟 ./resources/css/app.css，把 Tailwind 的語法引入貼上去。
```css==
/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
最後我們要在頁面中使用這個 app.css，總不能寫了但都沒用到吧。為了加一次，就讓所有的頁面都有掛載到 tailwind，我們要加在 ./resources/views/layouts/app.blade.php。但通常來說，頁面上會已經掛好 app.css 了，要檢查一下有沒有。
```php==
<html>
<head>
<!-- 前略... -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<!-- 後略... -->
```
完成後我們就可以開始來寫一點 Tailwind 樣式啦~ 複製一個 ./resources/js/components/ 裡的 ExampleComponent.vue，然後先命名為 MyComponent.vue，然後用 Tailwind 寫個新東西出來。
```htmlembedded==
<!-- 完整的 MyComponent.vue 檔案內容如下 -->
<template>
<div class="flex flex-col bg-white p-10 rounded-lg shadow space-y-6 max-w-screen-md mx-auto">
<h1 class="font-bold text-xl text-center">登入您的帳戶</h1>
<div class="flex flex-col space-y-1">
<input type="text" name="username" id="username" class="border-2 rounded px-3 py-2 w-full focus:outline-none focus:border-blue-400 focus:shadow" placeholder="使用者名稱" />
</div>
<div class="flex flex-col space-y-1">
<input type="password" name="password" id="password" class="border-2 rounded px-3 py-2 w-full focus:outline-none focus:border-blue-400 focus:shadow" placeholder="密碼" />
</div>
<div class="relative">
<input type="checkbox" name="remember" id="remember" checked class="inline-block align-middle"/>
<label class="inline-block align-middle" for="remember">記住帳號</label>
</div>
<div class="flex flex-col-reverse sm:flex-row sm:justify-between items-center">
<a href="#" class="inline-block text-blue-500 hover:text-blue-800 hover:underline">忘記密碼？</a>
<button type="submit" class="bg-blue-500 text-white font-bold px-5 py-2 rounded focus:outline-none shadow hover:bg-blue-700 transition-colors">
登入
</button>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log("Component mounted.");
}
};
</script>
```
然後一樣，在 ./resources/js/app.js 中==註冊 Vue 元件==
```javascript==
Vue.component('my-component' , require('./components/MyComponent.vue').default);
```
接著就可以在頁面上使用剛剛製作的 MyComponent 元件囉，我們加在之前在 ./resources/views/ 中創建的 example.blade.php
```htmlembedded==
@extends('layouts.app')
@section('content')
<example-component></example-component>
<br>
<my-component></my-component> <!-- 增加這個元件 -->
@endsection
```
然後這裡順便講個小技巧，雖然我們==每次改動了這些檔案都要重新編譯==一次，但每改動都要重跑 `npm run dev` 實在很麻煩，所以我們以後測試呢，都用這個指令：
```shell==
npm run watch
```
watch 這個指令執行後，你不主動結束它都不會跳出，它會一直監看你有沒有改動它會編譯到的檔案，如果有，它就會==只重新編譯你修改的檔案==，速度非常的快，等到你改完，它也全部都編譯完了。
而 Tailwind 的 JIT 模式也是同理，因為也需要編譯，所以要讓 Tailwind 進入 watch 模式，而它剛好可以跟 npm run watch 配合，當你開啟 JIT 模式，==tailwind 就會即時編譯==，還可支援編譯出設定檔中沒增加的樣式。
跑起 `php artisan serve` 看看成果吧！ 最後應該會長的像這樣：
<br>
完成囉～ 這樣安裝和前置設定就告一段落了，下一篇就要開始進入主題，來設計線上報修系統。
<br>
---
> [name=搋兔 Tryto] 明明就很忙到沒時間，但不知道一直想寫這篇幹嘛...。
###### tags: `線上報修系統開發教學` `laravel` `vue2` `tailwind` `vue`
<!-- === 連結 ============== -->
[postCSS]: #同場加映：postCSS-的安裝和設定
[tailwind-install-npm]: /@lalarabbits/Installation_npm_tailwind
[tailwind-laravel]: https://tailwindcss.tw/docs/guides/laravel
[release]: https://github.com/huibizhang/RepairingServiceSystem/tree/laravel-vue-installed
<!-- === CSS設定 ============== -->
<style>
a {
color:#0072E3;
text-decoration: none;
transition:color 0.75s;
}
a:hover {
color:#84C1FF;
text-decoration: none;
transition:color 0.75s;
}
.markdown-body mark {
border-radius: 5px;
color:#c7254e;
background-color:#f9f2f4;
}
</style>
<!-- === CSS：程式碼深色主題 ============== -->
<style>
.markdown-body pre {
background-color: rgb(31, 41, 55);
border: 1px solid #555 !important;
color: #CCCCCC;
border-radius:12px;
/*border-radius:0px;*/
}
.markdown-body pre .hljs-tag {
color: #BAE5FD;
}
.markdown-body pre .hljs-keyword {
color: #20D3EE;
}
.markdown-body pre .hljs-string {
color:#BEF263;
}
.markdown-body pre .hljs-comment {
color:#9CA3B0;
}
.markdown-body pre .hljs-attr {
color:#20D3EE;
}
.markdown-body pre .hljs-name {
color:#E87BF9;
}
.markdown-body pre .hljs-built_in {
color:#F76E79;
}
</style>
Sign in with Wallet
Connect another wallet