Tailwind + Emotion

Tailwind

Tailwind CSSはUtility-First向けです.起動ベルトを試したことがあるなら、もっとよく知っています.margin-topをあげたいなら、mt-숫자と一緒に使います.

<p class="mt-3 p-5 text-red bg-yellow-400">
  안녕하세요
</p>

迅速で簡単なデザインで、一貫したデザインに適しています.使用方法はclassに名前を追加するのではなく、classにスタイルを追加すればいいです.Tailwind公式ドキュメントで使用していたCSS構文を検索し、Tailwind構文に変換された内容を簡単に検索することもできます.
しかし、いくつかの欠点もあります.元々知っていた属性は別の名前で存在するので、それを熟知する必要があり、JavaScriptコードが使えないので不便です.また、内線の造形を見せるのも不便です.(興味は離れない)
そこで,注目点を分離するためにもJavaScriptコードを使用するためにもEmotionと併用することにした.

Emotion

CS-In-JS、例えばStyled-Components.CSSでは、明示的に定義されていない場合、親要素から属性が自動的に継承されます.ただし、CSS-in-JSは、ドキュメントレベルではなくコンポーネントレベルにCSSを抽象化するため、親要素の属性を継承しません.
ReactではCS-In-JSが多く使われています.

interface StrNumTheme {
  strNum: number;
  theme: Theme;
  isTrue: boolean;
}

//...

<List strNum={strNum} theme={theme} isTrue={isTrue} />

//...

const List = styled.div<StrNumTheme>`
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: ${({ strNum }) => strNum * 10}px;
  color: ${({ isTrue, theme }) => (isTrue ? theme.MAIN : theme.POINT_FONT)};
  font-weight: ${({ isTrue }) => (isTrue ? 700 : 400)};
  &:hover {
    color: ${({ theme }) => theme.BUTTON_SUB};
    font-weight: 700;
  }
`;

JavaScript変数を使用してスタイルに影響を与える場合は、propsに渡すことができます.タイプスクリプトを使用する場合は、インタフェースを宣言する必要があります.

twin.macro

私たちはTailwindとEmionを理解しました.今回は両方の長所を生かしていきましょう.

設定

타입스크립트 기반 next
yarn create next-app --example with-typescript-eslint-jest test-next

테일윈드, 이모션, 트윈마크로
yarn add @emotion/react @emotion/styled @emotion/css @emotion/server
yarn add -D twin.macro tailwindcss postcss@latest autoprefixer@latest @emotion/babel-plugin babel-plugin-macros

tailwind.config.js 생성
npx tailwindcss-cli@latest init -p

package.json

  "babelMacros": {
    "twin": {
      "preset": "emotion"
    }
  }

.babelrc.js

module.exports = {
  presets: [
    ['next/babel', { 'preset-react': { runtime: 'automatic', importSource: '@emotion/react' } }],
  ],
  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
};

twin.d.ts

twin.マクロの設定

import 'twin.macro';

import { css as cssImport } from '@emotion/react';
import styledImport from '@emotion/styled';

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport;
  const css: typeof cssImport;
}

tsconfig.json

.d.tsファイルincludeと絶対パス

  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@pages/*": ["pages/*"],
      "@server/*": ["server/*"],
      "@public/*": ["public/*"],
      "@styles/*": ["styles/*"],
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@hooks/*": ["hooks/*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]

postcss.config.js

cssnanoとTailwind CSS v 2のIEでサポートされているautofrefixerをプラグインに配置し、cssファイルを圧縮します.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {},
  },
};

tailwind.config.js

カスタマイズできる場所です.margin-topプロパティを入力し、自動完了を待機します.選択肢の範囲が狭い.しかし、画素単位でUIを実現したり、私の希望に応じてUIを実現したりする必要がある場合があります.

const plugin = require('tailwindcss/plugin');

module.exports = {
  mode: 'jit',
  content: ['pages/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      spacing: {
        1: '1px',
        2: '2px',
        //...
      },
      fontSize: {
        'title-0': '90px',
        //...
        'head-0': '45px',
        //...
        'body-1': '18px',
        //...
        'caption-1': '12px',
        //...
      },
      fontFamily: {
        garamond: 'GaramondPremrPro, Arial, sans-serif',
        noto: 'Noto Sans, Arial, sans-serif',
      },
      fontWeight: {
        ultralight: 100,
        light: 200,
        thin: 300,
        normal: 400,
        medium: 500,
        semibold: 600,
        bold: 700,
        extrabold: 800,
        black: 900,
      },
      lineHeight: {
        default: '1.2',
        12: '12px',
        //...
      },
      minWidth: {
        320: '320px',
        //...
      },
      maxWidth: {
        140: '140px',
        //...
      },
      minHeight: {
        882: '882px',
      },
      maxHeight: {
        460: '460px',
      },
      boxShadow: {
        sm: '0px 0px 8px rgba(0, 0, 0, 0.1)',
        md: '0px 2px 16px rgba(0, 0, 0, 0.1)',
        lg: '0px 4px 32px rgba(0, 0, 0, 0.1)',
      },
      keyframes: {
        show: {
          '0%': { transform: 'scale(0)', opacity: 1 },
          '100%': { transform: 'scale(1)', opacity: 1 },
        },
        fadeIn: {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 },
        },
      },

      animation: {
        show: 'show 200ms cubic-bezier(.6, 0, .4, 1) 1000ms forwards',
        fadeIn: 'fadeIn 300ms cubic-bezier(.6, 0, .4, 1) forwards',
      },
    },
    screens: {
      xsm: '320px',
      sm: '428px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
  },
  variants: {
    extend: {
      backgroundColor: ['disabled'],
    },
  },
  plugins: [
    plugin(({ addComponents }) => {
      const components = {
        '.flex-center': {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        },
      };
      addComponents(components);
    }),
  ],
};

mt-のようにfont-sizeを使用して付与できるようになりました.フォントのサイズは18 pxになります.自分の好みに応じてフォントやボックス、さらにはアニメーションの関連部分を追加することができます.
プラグインに触れることもできます.△気になったら詳細については、「文書」を参照してください。を試してみましょう.

使用

import { css } from '@emotion/react';
import tw, { styled } from 'twin.macro';

Tailwindにtwとcss-in-jsのstyledとcssをロードします.

const Caption = tw.p`
  font-noto font-light text-caption-1 w-full
  md:font-thin md:text-head-5 md:leading-26 md:whitespace-normal md:text-left md:mt-37
`;

まずはTailwindを使いましょうtext-body-1形を使用し、天命素子を使用するようにします.ここではTailwind構文を使用します.

mdは反応型のTailwind属性である.反応型を簡単に実現できるのは、移動第一です.

<Icon index={i + 1} />

Iconというインデックスでスタイリングしたいです.
JavaScriptを使用します.

interface IconProps {
  index: number;
}

const Icon = styled.div<IconProps>(({ index }) => [
  tw`
  md:w-198 md:flex-shrink-0 md:mt-20
`,
  css`
    position: relative;
    &::before {
      content: '0${index}';
      padding: ${index};
    }
  `,
]);

Tailwindだけを使うとありえない動作は感情Twinマクロで可能にする.
また,スタイルをインラインとして使用する必要はなく,htmlとcssは別々である.

プラグイン

aspectratioを設定できないのは双子です.これがmacroの欠点だと言われていますしかし、What is twin.macro?の記事から分かるように、aspect-ratioプラグインが存在する.他にもTailwindui、Custom Forms、Type graphy、Gradientのプラグインがあり、利用できます.
複雑な初期設定、尾風の欠点と同様に、属性を再認識する必要があります.欠点は可読性が悪いことです.
開発環境構築リファレンス