gooberでtailwindcssを使うヘ(^o^)ノ

前の記事でNext.jsでgooberを導入してみました

murajun1978.hatenadiary.com

今回はgooberでtailwindcssを使ってみます

Next.jsにtailwindのセットアップしていきましょう

$ npm install @tailwindcssinjs/macro @tailwindcss/ui tailwindcss
$ npm install -D @babel/core babel-plugin-macros

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/ui')],
};

// babel.config.js
module.exports = {
  presets: ['next/babel'],
  plugins: ['macros'],
};

これでsetupはOKです

んじゃ、使ってみましょう

// src/pages/index.tsx
import { NextPage } from 'next';
import { styled } from 'goober';
import tw from '@tailwindcssinjs/macro';

const styles = {
  button: tw`
    relative
    w-64 min-w-full
    flex justify-center
    py-2 px-4
    border border-transparent
    text-sm leading-5 font-medium
    rounded-md
    text-white
    bg-teal-600
    hover:bg-teal-500
    focus[outline-none border-teal-700 shadow-outline-teal]
    active:bg-teal-700
    transition duration-150 ease-in-out
  `,
};

const Button = styled('button')(() => styles.button);

const Home: NextPage = () => <Button>button</Button>;

動かして確認するとわかると思いますが、一部のスタイルがあたっていないと思います

backgrand-colorですね

理由はtailwindcssinjs/macroではcros-browser対応するためにfallbacksというsyntaxを使っています

{
  ...
  backgroundColor: ["#047481", "rgba(4, 116, 129, var(--bg-opacity))"]
  ...
}

tailwindcssinjs/macroの出力は👆のように配列になってます

これがgooberにはわからないんですね

解決方法はtailwindcssinjs/macroのREADMEに書いてあります

github.com

tailwindcssinjsのpluginで出力フォーマットを変更できるみたいです！

CSSのStringで出力するpluginを導入してみましょう

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/ui')],
  tailwindcssinjs: { // ここ追加
    plugins: [require('@tailwindcssinjs/macro/lib/plugins/cssString').default],
  },
};

スタイルがあたりました！

Enjoy goober + tailwindcss ヘ(^o^)ノ