Nuxt.jsでtailwindcssを使う メイン画像

Nuxt.jsでtailwindcssを使う

  • 公開日アイコン

Ad Area

Tailwind CSSはユーティリティー(汎用的なスタイル)に特化したCSSフレームワークである。Tailwind CSSで必要最低限のスタイル+自分のスタイルを追加する方法で使いたいと思い、Nuxt.jsプロジェクトで採用することにした。

インストール

// npm
npm install --save-dev @nuxtjs/tailwindcss
// yarn
yarn add --dev @nuxtjs/tailwindcss

nuxt.config.jsに追加

nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss'],

}

npm run devでサイトを起動すると、以下のファイルが生成される。

/assets/css/taiwlind.css
/tailwind.config.js

tailwind.config.jsの設定

以下のように設定を追加した。このあたりは各人の好みや目的で左右される。

tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
    fontFamily: {
      'sans': '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif',
    },
  },
  important: true,

}
  • containercenter: trueclass="container"margin: 0 auto;で中央寄せにする。
  • fontFamily…デフォルトのフォントスタイルを変えたい時に追加。
  • important…classのスタイルに!importantを追加したい場合、値をtrueにする。tailwind CSSのユーティリティスタイルを優先したいのでこの設定を追加した。何も記述しなければデフォルトのfalseが適用される。

参考ページ

Ad Area