いつも小説家になろうのブログばかり書いているので、今日は久々に個人開発の方の記事を更新です。
最近Reactで色々作ってたのですが、Vue.jsを触る機会がありましてハマっちゃいました。
そこから、Nuxt.jsにハマってささっとUI組みたいのでTailwind.cssを入れようとしたところで躓いたのでメモです。
Nuxt.jsにTailwind.cssを導入する
普段ピュアなHTML/CSS/JSや、ReactにTailwind.cssを入れる時と同じやり方だと、Nuxt.jsでは動きません。
なので以下の順序で行なってください
まずはターミナルで、プロジェクトフォルダに移動する
cd project-folder
次に、Tailwindcss, postcssをインストール。nodeのバージョンは21.6.2で行いました。バージョン管理はhomebrewを使っています。Voltaがいいって聞きますがどうなんでしょう?
npm install -D tailwindcss postcss autoprefixer
インストール後、configファイルを生成する。
npx tailwindcss init
そしてここが大事なのですが、nuxt.config.jsにTailwind.cssの設定を追加します。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
// ここから
css: ['~/assets/style.css'], // ここは自分のプロジェクトフォルダに合わせる
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
// ここまでを追加
})
Tailwind.cssのconfigにも記述を追加
/** @type {import('tailwindcss').Config} */
module.exports = {
// ここから
// devでvueを起動した時に、watchするファイルなのでフォルダを追加した時はここに追加する
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue",
],
// ここまでを追加
theme: {
extend: {},
},
plugins: [],
}
終わりです!
Nuxt.jsをもっと使うぞ!
元々Web制作をしていたので、ReactよりもVueでNuxtを使った方がとても理解しやすかったです。
個人開発を進めるぞー!
参考記事
公式サイト:https://tailwindcss.com/docs/guides/nuxtjs
Zennの記事:https://zenn.dev/kata_n/articles/2d4744d1bb6ab6
コメントを残す