# Tailwind 刻板練習 - Facebook 登入 ( Webpack 版 )
使用 webpack + postcss
## 成果圖
## package.json
```
{
"name": "1019",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --mode development --watch",
"start": "webpack --mode development",
"deploy": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.0",
"css-loader": "^6.5.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.3",
"postcss": "^8.3.11",
"postcss-loader": "^6.2.0",
"sass-loader": "^12.3.0",
"style-loader": "^3.3.1",
"tailwindcss": "^2.2.17",
"webpack": "^5.60.0",
"webpack-cli": "^4.9.1"
},
"browserslist": [
"last 2 version",
"> 1%",
"IE 10"
]
}
```
## postcss.config.js
```
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
```
## tailwind.config.js
```
略
.
.
.
purge: {
enabled: true, //生產時再打開
content: ['./src/html/*.html'],
},
.
.
.
略
```
## webpack.config.js
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
context: path.resolve(__dirname,'src/entry'),
entry: {
home: './index.js'
},
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: '[name].bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
//entry當路徑起點
template: '../html/index.html',
//output當路徑起點
filename: '../html/index.html'
}),
new MiniCssExtractPlugin({
filename: '../css/tailwind.css',
})
],
module: {
rules: [
//用css loader來處理css檔案
{
test: /\.css$/i,
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
}
]
}
};
```
## 目錄結構
## index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=976px, initial-scale=1.0">
<title>Document</title>
</head>
<body class="min-w-500 bg-white font-SFProDisplayRegular overflow-y-scroll">
<main class="min-h-160 bg-main pt-5 pb-52 lt:pt-18 lt:pb-28">
<div class="w-auto h-124 flex flex-col -mt-2 mx-10 lt:block lt:mb-12 lg:w-245 lg:mx-auto">
<div class="w-100 mx-auto text-center lt:inline-block lt:align-top lt:pt-28 lt:pr-8 lt:text-left">
<img class="h-26.5 mx-auto lt:-mx-7" src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg" alt="Facebook">
<h2 class="text-login-h2 -mt-1 lt:-mt-2 lg:w-125 lg:text-login-h2-lg">Facebook，讓你和親朋好友保持聯繫，隨時分享生活中的每一刻。</h2>
</div>
<div class="text-center lt:inline-block lt:align-top lt:float-right lt:pt-7">
<div class="w-99 bg-white border-login rounded-lg mt-10 mx-auto pt-2.5 pb-6">
<form action="#" method="POST">
<input class="input-login" type="email" placeholder="電子郵件地址或手機號碼">
<input class="input-login" type="password" placeholder="密碼">
<button class="w-91 btn btn-primary text-login-button mt-2.5">登入</button>
<div class="mt-3.25"><a class="text-forget-password-link text-blue-500 hover:underline" href="#">忘記密碼？</a></div>
<div class="flex items-center hr-login mx-4 my-4.75"></div>
<button class="btn btn-success text-create-account-button mt-1.75 px-4">建立新帳號</button>
</form>
</div>
<div class="text-create-fanpage-link mt-6.75">
為名人、團體或公司企業<a class="font-semibold hover:underline" href="#">建立粉絲專頁</a>
</div>
</div>
</div>
</main>
<footer class="pt-5">
<div class="w-auto mx-10 lg:w-245 lg:mx-auto">
<ul class="ul-footer pt-2">
<li>中文(台灣)</li>
<li class="pl-2.5"><a class="hover:underline" href="#">English (US)</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">Tiếng Việt</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">Bahasa Indonesia</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">ภาษาไทย</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">日本語</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">Español</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">Português (Brasil)</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">Français (France)</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">Deutsch</a></li>
<li class="pl-2.5"><a class="hover:underline" href="#">Italiano</a></li>
</ul>
<div class="h-2.25 hr-login mb-2"></div>
<ul class="ul-footer leading-footer -ml-5">
<li class="pl-5"><a class="hover:underline" href="#">註冊</a></li>
<li class="pl-5"><a class="hover:underline" href="#">登入</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Messenger</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Facebook Lite</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Watch</a></li>
<li class="pl-5"><a class="hover:underline" href="#">地標</a></li>
<li class="pl-5"><a class="hover:underline" href="#">遊戲</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Marketplace</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Facebook Pay</a></li>
<li class="pl-5"><a class="hover:underline" href="#">職缺</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Oculus</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Portal</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Instagram</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Bulletin</a></li>
<li class="pl-5"><a class="hover:underline" href="#">本地</a></li>
<li class="pl-5"><a class="hover:underline" href="#">募款活動</a></li>
<li class="pl-5"><a class="hover:underline" href="#">服務</a></li>
<li class="pl-5"><a class="hover:underline" href="#">投票資訊中心</a></li>
<li class="pl-5"><a class="hover:underline" href="#">社團</a></li>
<li class="pl-5"><a class="hover:underline" href="#">關於</a></li>
<li class="pl-5"><a class="hover:underline" href="#">刊登廣告</a></li>
<li class="pl-5"><a class="hover:underline" href="#">建立粉絲專頁</a></li>
<li class="pl-5"><a class="hover:underline" href="#">開發人員</a></li>
<li class="pl-5"><a class="hover:underline" href="#">工作機會</a></li>
<li class="pl-5"><a class="hover:underline" href="#">隱私政策</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Cookie</a></li>
<li class="pl-5"><a class="hover:underline" href="#">Ad Choices</a></li>
<li class="pl-5"><a class="hover:underline" href="#">使用條款</a></li>
<li class="pl-5"><a class="hover:underline" href="#">使用說明</a></li>
<li class="pl-5 invisible"><a class="hover:underline" href="#">設定</a></li>
<li class="pl-5 invisible"><a class="hover:underline" href="#">活動紀錄</a></li>
</ul>
<div class="text-xs my-5"><span class="text-gray-500">Facebook © 2021</span></div>
</div>
</footer>
</body>
</html>
```
## styles.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.bg-main {
background-color: #f0f2f5;
}
.color-footer-link {
color: #8a8d91;
}
.border-login {
box-shadow:0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}
.hr-login {
border-bottom: 1px solid #dadde1;
}
}
@layer components {
.btn {
@apply rounded-md font-bold;
}
.btn-primary {
@apply text-white;
background-color: #1877f2;
}
.btn-success {
@apply text-white;
background-color: #42b72a;
}
.input-login {
@apply w-91 text-lg border rounded-md my-1.5 px-4 py-2.75;
background-color: #FFFFFF url('https://static.xx.fbcdn.net/rsrc.php/v3/yO/r/YQNfPR9MJfx.png') repeat-x;
}
.ul-footer {
@apply flex flex-wrap items-center color-footer-link text-footer-link;
}
}
```
## index.js
```
import '../css/styles.css'
```
Sign in with Wallet
Connect another wallet