styled-componentsからTailwind CSSに移行

概要

styled-componentsがメンテナンスモードとのことなので、他でも使っていた Tailwind CSSに乗り換える。
https://opencollective.com/styled-components/updates/thank-you

関連リンク

• https://opencollective.com/styled-components/updates/thank-you

作業

install

プロジェクトはnext.jsで書かれたコードなので↓を参考に進める。
Tailwind CSSのドキュメントでもnext.jsのドキュメントでも同じことが書いてあるので間違い無いはず。

• https://tailwindcss.com/docs/installation/framework-guides/nextjs
• https://nextjs.org/docs/app/building-your-application/styling/tailwind-css

問題発生1

nextで起動したところ /tailwind.cssが404になることがわかった。

 GET /tailwindcss 404 in 231ms

おそらくこのせいでtailwindのcssは効いてない。

_document.tsxで styled-componentsのcssを読み込んでいるところをコメントアウトすると該当のエラーは消える(tailwindの読み込みも消える)ので、この辺が悪さをしていそう。

解決策

問題発生時の調査で悪そうと思った箇所をそのまま削除。
無くても困らなそうだったため一旦消す。

--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -7,10 +7,6 @@ import Document, {
   NextScript,
 } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
-// @ts-ignore
-import css from '!!raw-loader!../index.css';
-// @ts-ignore
-import prismCss from '!!raw-loader!../styles/highlight/prism.css';
 import { DocumentInitialProps } from 'next/dist/shared/lib/utils';
 
 export default class MyDocument extends Document {
@@ -31,12 +27,6 @@ export default class MyDocument extends Document {
         ...initialProps,
         styles: [
           ...React.Children.toArray(initialProps.styles),
-          <style
-            key="custom"
-            dangerouslySetInnerHTML={{
-              __html: `${css}\n${prismCss}`,
-            }}
-          />,
           ...sheet.getStyleElement(),
         ],
       };

問題発生2

text周りの指定が効かない。
文字サイズも文字色も変わらないがアンダーラインは引ける。

解決策

リセットCSSとして入れてた設定が悪そうだった。
importより後に入れているのでTailwind CSSの設定を上書きしていたと思われる。

--- a/src/index.css
+++ b/src/index.css
@@ -1,65 +1 @@
 @import 'tailwindcss';
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-
-body {
-    line-height: 1;
-}
-
-ol, ul {
-    list-style: none;
-}
-
-blockquote, q {
-    quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-html {
-    font-size: 62.5%;
-    color: #333333;
-}
-body {
-    margin: 0;
-    font-family: "Helvetica Neue",
-    Arial,
-    "Hiragino Kaku Gothic ProN",
-    "Hiragino Sans",
-    Meiryo,
-    sans-serif;
-}

問題？発生

既存のstyleはstyled-media-queryを利用して画面幅が一定以下の時にスマホ用のstyleに切り替えていた。
Tailwind CSSはモバイルファーストで一定以上の場合にstyleを切り替えられる都合、全部読み替える必要があった。

解決策？

全部頑張って読み替えた。

ひたすら作業

あとは困ることなかったのでひたすら既存styleをtailwindにあう形に修正。
色やサイズ感など独自定義だったものは基本的にtailwindに沿って変更。

まとめ

ドキュメントがすこぶる簡素な割に全然動かなくてハマってた。
オチは大したことなかったので、Next.jsにTailwind CSS導入するの自体は簡単にできるという学びを得た。