#30-用Tailwind&Gulp做个动态菜单网站(完赛!)

Yo! 因为用Gulp包其他页面，但最後一页临时改成用Tailwind，
在设定上卡了一下...一起纪录下。
这篇的大纲

1.渐入的动态菜单 （还是要有动态提案！不离题）
2.在Gulp里设定Tailwind
3.完赛感言(没有人想听吧！！)

动态菜单

切换标签时下方的文章会渐入，
老样子看成果：

因为我是每次筛选都会重新绘制一次DOM
所以animation只要加一次就好，
跟上一篇一样用自订的，请见： Tailwind自订CSS动画传送门

在tailwind.config.js档案里面设定，让他从上往下渐入

extend: {
      keyframes: {
        fadeIn: {
          '0%': { transform: 'translateY(-30px)', opacity: '0' },
          '100%': { transform: 'translateY(0px)',opacity: '1' },
        },
       },
       animation: {
        fadeIn: 'fadeIn 1s ease-in-out 1',
       },
    },

我是用@apply将多个共同的class挂载到卡片上

.card {
  @apply w-full p-4 rounded-xl shadow-md animate-fadeIn;
}

大功告成啦！

Gulp设定加入Tailwind

**前提是Gulp档案已经设定好

1. 下载Tailwind相关套件

npm install -D tailwindcss@latest autoprefixer@latest postcss@latest gulp gulp-postcss gulp-rename

2.建立一个postcss.config.js档案

将tailwind&autoprefixer设定进去

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
}

3.在gulpfile.js设定档案设定

//tailwind Task
const postcss = require('gulp-postcss');

function processTailwind() {
    return src('app/styles/tailwind.css')
            .pipe(postcss())
            .pipe(dest('dist/styles',{sourcemaps: '.'}))
}

然後在把这个task串接在你的pipe里面，
基本的tailwind在gulp 就完成啦！
以下是我的范例

exports.default = series(
    cleanFolder,
    htmlTask,
    scssTask,
    processTailwind,
    jsTask,
    threeTask,
    staticTask,
    browsersyncServe,
    watchTask
)

帮Tailwind瘦身时别忘了安装环境

Tailwind档案很肥，有4MB，请帮他瘦身，
不然github根本传到天荒地老哈哈...
（就是传很久才想起来太肥了XDD）

依照兔兔这篇
Day 15：「你真的不减肥吗...？」- Tailwind 的生产环境优化

按照了步骤，却没有办法帮我的tailwind瘦身
试了好几次结果没有成功，照理说生产环境就会自动拿掉不用的class呀！
原来是因为自己
没装环境档案
没装环境档案
没装环境档案

1. 先下载环境

//我本人需要sudo啦
sudo npm install -g cross - env

2. 再来增加指令到package.json

"scripts": {
    "build": "export NODE_ENV='production'&& gulp"
  },

设定完之後，tailwind才会吃到环境变数，执行purge让我们的css瘦身！
还是Gulp新手，有任何想法请多指教！

献上我的动态菜单！完赛！

我的动态菜单：这边请

这次铁人很贪心，复习并学了很多新的语言（顺便收割了Tailwind XD）
很感谢主管鼓励我参赛，
我很幸运在转职第一家公司就碰到很棒的同事和主管。
後端的同事跟我分享怎麽写clean code和模组化的观念。
有一次aync await写到走火入魔，导致网页变很慢，前端的前辈很贴心地私讯提醒我。
主管会花时间code review，然後不断鼓励我们。
我的转职好夥伴也会彼此问蠢问题、彼此帮看bug。
（所谓bug: 眼睛业障重，没看到的错字）

因为某些原因不得不出国，才发现自己身在台湾，
还可以转职学程序语言真的非常非常非常幸运。
贫穷的人根本无法负担电脑、学习相关知识，
甚至因为网路很贵、电力不稳，连手机使用都要打问号。
每次很灰心的时候，都要提醒自己珍惜这一切。

最後感谢我的铁人夥伴们！
一个人写文章真的很无聊，一起哀哀叫比较有趣！

明年希望也能够回来挑战铁人赛！不知道会是哪一个主题～

也祝福大家!!!下台一鞠躬