モダンWeb開発 Tailwind + Nuxt

CSS 2019サーベイによるTailwindの位置

これ

https://2019.stateofcss.com/

CSS Framewroks

https://2019.stateofcss.com/technologies/css-frameworks/

満足度が高いフレームワークに

Tailwindの使用歴

https://2019.stateofcss.com/technologies/css-frameworks/#css-frameworks-experience-heatmap

tailwindの使用者は全体の4%ほど

Tailwindの内訳

https://2019.stateofcss.com/technologies/css-frameworks/#tailwind

聞いたことない人が大半だが興味ある人も大半

Tailwindを選択した理由

理由

デザインへの柔軟な対応が可能
開発時間の短縮
スタイルの自己文書化
CSS初心者に優しい

デザインへの柔軟な対応が可能

業務アプリケーションのUIも構築可能

https://aurorainsight.com/ https://dribbble.com/shots/10760157-Web-Agency

https://github.com/Adamkif/Gatsby-Project-Game-Warrior

その他

開発時間の短縮

簡単なアプリケーションなら一日で構築可能

スタイルの自己文書化

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Holy smokes!</strong>
  <span class="block sm:inline">Something seriously bad happened.</span>
  <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
    <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
  </span>
</div>

旧来

現在

CSS初心者に優しい

様々なプロパティがわからない
リファレンスを読む時間が惜しい
できるだけ素早く柔軟に開発したい

問題点

CSS初心者に優しい

公式の検索が優秀

NuxtへのTailwind導入方法

新規作成

$ yarn create nuxt-app test_project

デモ

既存のNuxtプロジェクトに追加

$ yarn add --dev @nuxtjs/tailwindcss

Nuxt Moduleで導入

設定

// nuxt.config.js
{
  buildModules: [
    '@nuxtjs/tailwindcss'
  ],
  tailwindcss: {
    configPath: '~/config/tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css',
    purgeCSSInDev: true,
    exposeConfig: false
  }
}

purgeCSSInDev: true

/* purgecss start ignore */
@import '@snackbar/core/dist/snackbar.css';
/* purgecss end ignore */

/* purgecss start ignore */

外部依存Vueコンポーネントを導入した際のcssが削除される対策に有効

JSから

// nuxt.config.js
{
  tailwindcss: {
    exposeConfig: true
  },
}

設定

// Import fully resolved config
import tailwindConfig from '~tailwind.config'

 // Import only part which is required to allow tree-shaking
import { theme } from '~tailwind.config'

使い方

実行時にスタイルを適用できて便利

<template>
  <p class="text-white text-sm border border-red-200 border-solid inline-block"
     v-if="conditions()">{{message}}</p>
</template>

<script lang="ts">
  import {defineComponent} from "@vue/composition-api"

  interface Props {
    message: string
    fn: Function
  }

  export default defineComponent({
    props: {
      message: String,
      conditions: Function
    }
  })
</script>

スタイルが自己文書化されるのでわかりやすい