---
# System prepended metadata

title: '#2 Tailwind 安裝 | Lavuta：線上報修系統開發'
tags: [' vue', ' laravel', 線上報修系統開發教學, ' tailwind', ' vue2']

---

---
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` 看看成果吧！ 最後應該會長的像這樣：

![](https://i.imgur.com/taCuoMa.png)
<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>