tailwind css 修改問題 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

tailwind css 修改問題

tailwind css tailwindcss tailwind

nick12345 2022-11-03 22:33:59 ‧ 929 瀏覽

分享至

最近接手一個PROJECT是用tailwind CSS 寫的，我沒有學過，跟我之前用的CSS有很大不同。
我也不知道怎樣修改。
我想把translate-x-[-25%] 改成translate-x-[-35%]

<div class="max-w-none h-full md:max-w-[100%] translate-x-[-25%] md:translate-x-[0]"></div>

然後我在CSS 部分

.translate-x-\[-25\%\] {
    --tw-translate-x: -25%
}

.translate-x-\[-35\%\] {
    --tw-translate-x: -35%
}

但結果RELOAD後沒有更改成 --tw-translate-x: -35%，請問如果要修改或加CSS CLASS是有獨特的方法嗎?

我打開 f12 inspect，指向CSS，會有日期和VER，是每次都拿不同嗎??

看更多先前的討論...收起先前的討論...

python80117 iT邦新手 5 級 ‧ 2022-11-04 11:47:04 檢舉

通靈猜一下改的檔案跟引入的檔案不同

nick12345 iT邦新手 4 級 ‧ 2022-11-04 12:20:16 檢舉

但寫了.translate-x-\[-25\%\]的CSS 只有一個位置，是不是改完要RUN什麼嗎?

python80117 iT邦新手 5 級 ‧ 2022-11-04 12:22:12 檢舉

還是快取清一下?

nick12345 iT邦新手 4 級 ‧ 2022-11-04 12:28:27 檢舉

我已經用無痕，正常打了CSS，就會直接有效果嗎?

python80117 iT邦新手 5 級 ‧ 2022-11-04 13:01:06 檢舉

對阿，class有加，CSS也有改，照理來說會有效果

nick12345 iT邦新手 4 級 ‧ 2022-11-04 13:01:43 檢舉

package.json 有這個scripts，我都run了，但都是沒有效果出來。

"scripts": {
"watch": "tailwindcss -i /xxx/xxx/xxx/xxx/xxx/xxx/xxx/xxx/index.css -o ./xxx/style.css --watch --minify",
"build": "tailwindcss -i /xxx/xxx/xxx/xxx/xxx/xxx/xxx/xxx//index.css -o ./xxx/style.css --minify"
},

python80117 iT邦新手 5 級 ‧ 2022-11-04 13:04:23 檢舉

編譯出來的css有包含這個?

.translate-x-\[-35\%\] {
--tw-translate-x: -35%
}

nick12345 iT邦新手 4 級 ‧ 2022-11-04 13:13:27 檢舉

我在INDEX.CSS打了，RUN了兩個後，STYLE.CSS多了一個，但網站沒有用到。

python80117 iT邦新手 5 級 ‧ 2022-11-04 13:15:56 檢舉

要引入編譯後的style.css

nick12345 iT邦新手 4 級 ‧ 2022-11-04 13:19:37 檢舉

引入是怎麼做?

python80117 iT邦新手 5 級 ‧ 2022-11-04 13:21:31 檢舉

<link rel="stylesheet" href="https://ithelp.ithome.com.tw/css/bootstrap.min.css">
類似這樣

nick12345 iT邦新手 4 級 ‧ 2022-11-04 13:34:55 檢舉

用twig，不是html 我也找不到怎運作，我不知道他寫在哪。

froce iT邦大師 1 級 ‧ 2022-11-04 15:45:16 檢舉

1. 你有編譯他的css嗎?tailwind是需要編譯的，35%那個應該是編譯後自動出來的。
2. 就算用模板，一樣會有引入的地方，可能是為了重複使用，放在另外的檔案中，這個你只能自己去找。

nick12345 iT邦新手 4 級 ‧ 2022-11-04 16:47:27 檢舉

1.編譯是WATCH / BUILD的意思嗎?我有運行到這2個。
2.我global search用只有一個位置有寫原先的-25，我就這邊改，，我做法和次序應該怎樣才正確?

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

2 個回答

0

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2022-11-04 06:19:05

先針對第一個問題。

你那個DIV中的[-25%]有先改成[-35%]
因為從你的發言中，只看到你將CSS多加了一個35%的設定。但不確定你是否有將DIV的CLASS改變。

再來，css後置版本號或是順機(日期)號。
這是為了避免瀏覽器的CSS緩存。
確實是要讓瀏覽器以為每次都不同而重載使用。

回應 1
分享
檢舉

nick12345 iT邦新手 4 級 ‧ 2022-11-04 07:54:11 檢舉

DIV 有加，所以不懂怎樣才有效果，
簡單來說，自定CSS方法是不是跟傳統有分別?

登入發表回應

0

前端野人

iT邦新手 3 級 ‧ 2022-11-05 14:58:53

負數要用

-translate-x-[25%]

https://tailwindcss.com/docs/translate

回應 2
分享
檢舉

nick12345 iT邦新手 4 級 ‧ 2022-11-07 09:42:58 檢舉

之前-translate-x-[-25%]是有效果，但-35%是沒有

前端野人 iT邦新手 3 級 ‧ 2022-11-08 23:06:35 檢舉

不知道 [] 能不能加負數而-translate-x-[-25%] 會負負得正
等於 translate-x-[25%] 囉?

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙