参考ページ
- 下記のページの手順の場合、途中でエラーが出るので、少し手順を変えてインストールしてます。 tailwindcss.com
インストール
- 下記のインストールだとエラーが発生する
yarn add @nuxtjs/tailwindcss tailwindcss
- 下記のように指定してインストールするとエラーが発生しなかったです
yarn add @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
設定
nuxt.config.jsファイルに下記のように記述する
buildModules: [
// https://go.nuxtjs.dev/eslint
'@nuxtjs/eslint-module',
'@nuxtjs/tailwindcss'
],
npx tailwindcss initのコマンドを実行する
# npx tailwindcss init tailwindcss 2.0.2 ✅ Created Tailwind config file: tailwind.config.js
assets/css/tailwind.cssファイルを作成して下記のように設定する
@tailwind base; @tailwind components; @tailwind utilities;
nuxt.config.jsファイルに下記のように記述する
css: [
'@/assets/css/tailwind.css'
],
サンプルコード
<template>
<div>
<div class="w-full">
<div class="grid gap-16 grid-cols-2 w-full bg-white shadow-lg rounded-lg p-16 overflow-hidden mx-auto">
<div class="grid gap-2">
<button class="uppercase p-3 flex items-center bg-blue-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29zM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9z" fill="currentColor" /></svg>
</button>
<button class="uppercase p-3 flex items-center bg-yellow-500 text-blue-50 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M26 18A10 10 0 1 1 16 8h6.182l-3.584 3.585L20 13l6-6l-6-6l-1.402 1.414L22.185 6H16a12 12 0 1 0 12 12z" fill="currentColor" /></svg>
</button>
<button class="uppercase p-3 flex items-center bg-red-500 text-blue-50 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M12 12h2v12h-2z" fill="currentColor" /><path d="M18 12h2v12h-2z" fill="currentColor" /><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor" /><path d="M12 2h8v2h-8z" fill="currentColor" /></svg>
</button>
<button class="uppercase p-3 flex items-center bg-gray-500 text-blue-50 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M15 2h2v3h-2z" fill="currentColor" /><path d="M27 15h3v2h-3z" fill="currentColor" /><path d="M15 27h2v3h-2z" fill="currentColor" /><path d="M2 15h3v2H2z" fill="currentColor" /><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor" /><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor" /><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor" /><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor" /><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor" /></svg>
</button>
<button class="uppercase p-3 flex items-center bg-green-500 text-blue-50 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M23 20a5 5 0 0 0-3.89 1.89l-7.31-4.57a4.46 4.46 0 0 0 0-2.64l7.31-4.57A5 5 0 1 0 18 7a4.79 4.79 0 0 0 .2 1.32l-7.31 4.57a5 5 0 1 0 0 6.22l7.31 4.57A4.79 4.79 0 0 0 18 25a5 5 0 1 0 5-5zm0-16a3 3 0 1 1-3 3a3 3 0 0 1 3-3zM7 19a3 3 0 1 1 3-3a3 3 0 0 1-3 3zm16 9a3 3 0 1 1 3-3a3 3 0 0 1-3 3z" fill="currentColor" /></svg>
</button>
</div>
<div class="grid gap-2">
<button class="uppercase p-3 flex items-center border border-blue-600 text-blue-600 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29zM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9z" fill="currentColor" /></svg>
</button>
<button class="uppercase p-3 flex items-center border border-yellow-600 text-yellow-600 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M26 18A10 10 0 1 1 16 8h6.182l-3.584 3.585L20 13l6-6l-6-6l-1.402 1.414L22.185 6H16a12 12 0 1 0 12 12z" fill="currentColor" /></svg>
</button>
<button class="uppercase p-3 flex items-center border border-red-600 text-red-600 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M12 12h2v12h-2z" fill="currentColor" /><path d="M18 12h2v12h-2z" fill="currentColor" /><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" fill="currentColor" /><path d="M12 2h8v2h-8z" fill="currentColor" /></svg>
</button>
<button class="uppercase p-3 flex items-center border border-gray-600 text-gray-600 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M15 2h2v3h-2z" fill="currentColor" /><path d="M27 15h3v2h-3z" fill="currentColor" /><path d="M15 27h2v3h-2z" fill="currentColor" /><path d="M2 15h3v2H2z" fill="currentColor" /><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor" /><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor" /><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor" /><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor" /><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor" /></svg>
</button>
<button class="uppercase p-3 flex items-center border border-green-600 text-green-600 max-w-max shadow-sm hover:shadow-lg rounded-full w-12 h-12 ">
<svg width="32" height="32" viewBox="0 0 32 32" style="transform: rotate(360deg);"><path d="M23 20a5 5 0 0 0-3.89 1.89l-7.31-4.57a4.46 4.46 0 0 0 0-2.64l7.31-4.57A5 5 0 1 0 18 7a4.79 4.79 0 0 0 .2 1.32l-7.31 4.57a5 5 0 1 0 0 6.22l7.31 4.57A4.79 4.79 0 0 0 18 25a5 5 0 1 0 5-5zm0-16a3 3 0 1 1-3 3a3 3 0 0 1 3-3zM7 19a3 3 0 1 1 3-3a3 3 0 0 1-3 3zm16 9a3 3 0 1 1 3-3a3 3 0 0 1-3 3z" fill="currentColor" /></svg>
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 bg-blue-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 bg-yellow-500 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 bg-red-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 bg-gray-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 bg-green-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 border border-blue-600 text-blue-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 border border-yellow-600 text-yellow-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 border border-red-600 text-red-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 border border-gray-600 text-gray-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 border border-green-600 text-green-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 bg-blue-300 text-blue-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 bg-yellow-300 text-yellow-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 bg-red-300 text-red-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 bg-gray-300 text-gray-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 bg-green-300 text-green-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 rounded bg-blue-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded bg-yellow-500 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded bg-red-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded bg-gray-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded bg-green-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 rounded border border-blue-600 text-blue-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded border border-yellow-600 text-yellow-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded border border-red-600 text-red-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded border border-gray-600 text-gray-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded border border-green-600 text-green-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 rounded bg-blue-300 text-blue-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded bg-yellow-300 text-yellow-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded bg-red-300 text-red-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded bg-gray-300 text-gray-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded bg-green-300 text-green-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 rounded-full bg-blue-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full bg-yellow-500 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full bg-red-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full bg-gray-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full bg-green-600 text-blue-50 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 rounded-full border border-blue-600 text-blue-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full border border-yellow-600 text-yellow-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full border border-red-600 text-red-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full border border-gray-600 text-gray-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full border border-green-600 text-green-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
<div class="grid gap-2">
<button class="uppercase px-8 py-2 rounded-full bg-blue-300 text-blue-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full bg-yellow-300 text-yellow-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full bg-red-300 text-red-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full bg-gray-300 text-gray-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
<button class="uppercase px-8 py-2 rounded-full bg-green-300 text-green-600 max-w-max shadow-sm hover:shadow-lg">
button
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
上記のコードは下記のページのコードです。tailwindcssの設定が有効になっていることが確認できる tailwindcomponents.com
実行結果
