نصب Tailwind

نصب Tailwind در Next#

ابتدا از دستورات زیر برای نصب برروی ورژن های مختلف Next استفاده می کنیم:

# If you're on Next.js v10
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

ساخت فایل کانفیگ Tailwind و Postcss#

توسط دستور زیر می توان فایل کانفیگ، همراه با کد های پیش فرض آن را ساخت

npx tailwindcss init -p

فلگ p برای ساخت فایل کانفیگ postcss می باشد

که در فایل tailwind.config.js و postcss.config.js به ترتیب، کد های زیر به صورت پیش فرض موجود می باشد:

    // tailwind.config.js
    module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
    extend: {},
    },
    variants: {
    extend: {},
    },
    plugins: [],
    }

    // postcss.config.js
    module.exports = {
    plugins: {
    tailwindcss: {},
    autoprefixer: {},
    },
    }

حذف استایل های استفاده نشده در Tailwind#

می توان از کد های زیر برای حذف استایل های استفاده نشده استفاده کرد:

    // tailwind.config.js
    module.exports = {
    purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
    extend: {},
    },
    variants: {
    extend: {},
    },
    plugins: [],
    }

اضافه کردن Tailwind به پروژه#

برای اینکار می توان به 2 صورت زیر عمل کرد:

اضافه کردن مستقیم Tailwind به app.js

    // pages/_app.js
    import 'tailwindcss/tailwind.css'

    function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
    }

    export default MyApp

اضافه کردن Tailwind به globals.css در این روش از directive های خود Tailwind استفاده می کنیم که هنگام build، تبدیل می شوند

    /* ./styles/globals.css */
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

منبع:

tailwindcss.com/docs/guides/nextjs