こんにちはかみむらです。一応フロントエンドエンジニアをやっていますが、CSSやマークアップは苦手です。なので、できるだけ構造化されたものを使いたいです。そこで、検討されるのがCSSフレームワークです。現在CSSフレームワークはたくさんありますが、特に熱いのがTailwind CSSです。
Tailwind CSSはユーティリティファーストのCSSフレームワークで、事前に用意されているスタイルのクラスを追加して、レイアウトやコンポーネントを作成していきます。
Bootstrapと比べるとシンプルに扱えることが、人気の要因です。
例えば、Tailwind CSSのカードコンポーネントをみてみましょう。
美しいカードコンポーネントが、比較的短い記述量で作れます。
<div class="max-w-sm rounded overflow-hidden shadow-lg"> <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains"> <div class="px-6 py-4"> <div class="font-bold text-xl mb-2">The Coldest Sunset</div> <p class="text-gray-700 text-base"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. </p> </div> <div class="px-6 py-4"> <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span> <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span> <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span> </div> </div>
Tailwind CSSのCardsから引用
tailwindcss.com
そのほかにも、たくさんのデモコードがあります。今回はNext.jsにTailwind CSSを導入していきます。ついでに、styled-componentsでも使ってみましょう。
公式ドキュメント
tailwindcss.com
前提
create-next-appで作成したプロジェクトをベースにしていきます。
インストール
まずは必要なパッケージをインストールします。
$ yarn add -D @fullhuman/postcss-purgecss tailwindcss postcss-import
セットアップ
Tailwind CSSを使えるようにするための設定をします。postcss.config.jsファイルを作成してください。
postcss.config.js
const purgecss = [ '@fullhuman/postcss-purgecss', { content: ['./components/**/*.js', './pages/**/*.js'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], }, ]; module.exports = { plugins: [ 'postcss-import', 'tailwindcss', 'autoprefixer', ...(process.env.NODE_ENV === 'production' ? [purgecss] : []), ], };
コードはこちらのテンプレートを参考にしました。
github.com
そして、Tailwind CSSのbase、components、utilitiesをインポートします。pagesフォルダの中に、styles.cssを作成します。
pages/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
作成したCSSファイルを、_app.jsに読み込みます。_app.jsについては、下記のドキュメントを一読してください。
Advanced Features: Custom `App` | Next.js
pages/_app.js
//追加 import "./style.css";
これで、Tailwind CSSを使うことができます。
styled-componentsで使う方法
多くのSPAライブラリでは、CSS in JSの使用が検討されると思います。私はstyled-componentsを使っているので、Tailwind CSSと協業する方法を調べてみました。
Next.jsにstyled-componentsを導入する記事はこちらでも書いています。
code-log.hatenablog.com
tailwind.macroというbabelのプラグインを使えば、styled-componentsと協業できそうです。なので、インストールします。
github.com
yarn add -D babel-plugin-macros tailwind.macro
補足
Tailwind v1系を使ってる場合は、alpha版を使わないといけないみたいです。なので、最新バージョンをインストールしてください。
yarn add -D tailwind.macro@next
インストールした、babelプラグインを.babelrcに追記します。
.babelrc
{
"presets": ["next/babel"],
"plugins": [
'macros',
[
"styled-components",
{
"ssr": true,
"displayName": false,
"preprocess": false
}
]
]
}そして、Tailwindの設定ファイルを作成します。
$ npx tailwind init
tailwind.config.jsが作成されます。
module.exports = { purge: [], theme: { extend: {}, }, variants: {}, plugins: [], }
これで、tailwind.macroをインポートして、tw``の中に、Tailwind CSSのスタイルを入れれば作ることができます。下記は一例です。
import React from 'react'; import styled from 'styled-components'; import tw from 'tailwind.macro'; const Box = styled.div` ${tw`bg-teal-500`}; `; const Hoge = () => ( <Box></Box> );
