なにを目指しているのか 優れたスタイリング体験 CSS-IN-JS ライブラリのEmotionと CSS のショートハンドライブラリのTailwind CSSを組み合わせて、SCSS の便利な&やネストで記述できる従来の優れた CSS 記述の自由を残したまま、スコープが限定された保守性の高く Tailwind CSS の持つスピードでスタイリングできる現代的なマークアップ開発体験を目指します。 つまり、CSS-IN-JS と Tailwind CSS のいいとこ取りをします。見た方が早いのでコチラをご覧下さい。 Emotion で CSS コンポーネントを作成しつつ、CSS コンポーネントの中でtwキーワードを使って Tailwind CSS のショートハンドが使えます。 また、css={}でスタイルを当てることによって、グローバル汚染を防ぎつつ、HTML タグにスタイリングされているスタ
![Next.jsとEmotion & Tailwind (Twin.macro)で環境構築して保守性の高い快適なマークアップ体験を手に入れる。](https://cdn-ak-scissors.b.st-hatena.com/image/square/e76855e00179a3daa9cadae773bbb164978440bf/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--mpniXohW--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%2525E3%252581%2525A8Emotion%252520%252526%252520Tailwind%252520%252528Twin.macro%252529%2525E3%252581%2525A7%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%252597%2525E3%252581%2525A6%2525E4%2525BF%25259D%2525E5%2525AE%252588%2525E6%252580%2525A7%2525E3%252581%2525AE%2525E9%2525AB%252598%2525E3%252581%252584%2525E5%2525BF%2525AB%2525E9%252581%2525A9%2525E3%252581%2525AA%2525E3%252583%25259E%2525E3%252583%2525BC...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AJunsei%252520Nagao%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dOcWNtb1NFLWNiZnQzQWhCWWVoM2FLemNpdm5OV21oUW1DN3lfPXMyNTAtYw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)