Getting Started with TailwindCSS CLI

TailwindCSS has become the go-to utility-first CSS framework. With the latest version, installing via CLI is easier than ever. Here’s how you can set it up and customize fonts & colors for your next project.

🔧 𝗦𝘁𝗲𝗽 𝟭: 𝗜𝗻𝘀𝘁𝗮𝗹𝗹 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱𝗖𝗦𝗦 𝘃𝗶𝗮 𝗖𝗟𝗜

𝘯𝘱𝘮 𝘪𝘯𝘴𝘵𝘢𝘭𝘭 -𝘋 𝘵𝘢𝘪𝘭𝘸𝘪𝘯𝘥𝘤𝘴𝘴

𝘯𝘱𝘹 𝘵𝘢𝘪𝘭𝘸𝘪𝘯𝘥𝘤𝘴𝘴 𝘪𝘯𝘪𝘵

This generates a tailwind.config.js file where you can configure fonts, colors, and themes.

🎨 𝗦𝘁𝗲𝗽 𝟮: 𝗔𝗱𝗱 𝗖𝘂𝘀𝘁𝗼𝗺 𝗙𝗼𝗻𝘁𝘀

Inside tailwind.config.js:

𝘮𝘰𝘥𝘶𝘭𝘦.𝘦𝘹𝘱𝘰𝘳𝘵𝘴 = {

  𝘵𝘩𝘦𝘮𝘦: {

    𝘦𝘹𝘵𝘦𝘯𝘥: {

      𝘧𝘰𝘯𝘵𝘍𝘢𝘮𝘪𝘭𝘺: {

        𝘴𝘢𝘯𝘴: ['𝘐𝘯𝘵𝘦𝘳', '𝘴𝘢𝘯𝘴-𝘴𝘦𝘳𝘪𝘧'],

        𝘩𝘦𝘢𝘥𝘪𝘯𝘨: ['𝘗𝘰𝘱𝘱𝘪𝘯𝘴', '𝘴𝘢𝘯𝘴-𝘴𝘦𝘳𝘪𝘧'],

      },

    },

  },

}

Now use them like:

<𝘩1 𝘤𝘭𝘢𝘴𝘴="𝘧𝘰𝘯𝘵-𝘩𝘦𝘢𝘥𝘪𝘯𝘨">𝘏𝘦𝘭𝘭𝘰 𝘛𝘢𝘪𝘭𝘸𝘪𝘯𝘥!</𝘩1>

<𝘱 𝘤𝘭𝘢𝘴𝘴="𝘧𝘰𝘯𝘵-𝘴𝘢𝘯𝘴">𝘛𝘩𝘪𝘴 𝘪𝘴 𝘤𝘶𝘴𝘵𝘰𝘮 𝘵𝘦𝘹𝘵</𝘱>

🌈 𝗦𝘁𝗲𝗽 𝟯: 𝗖𝘂𝘀𝘁𝗼𝗺𝗶𝘇𝗲 𝗖𝗼𝗹𝗼𝗿𝘀

𝘦𝘹𝘵𝘦𝘯𝘥: {

  𝘤𝘰𝘭𝘰𝘳𝘴: {

    𝘣𝘳𝘢𝘯𝘥: {

      𝘭𝘪𝘨𝘩𝘵: '#6𝘌𝘌7𝘉7',

      𝘋𝘌𝘍𝘈𝘜𝘓𝘛: '#10𝘉981',

      𝘥𝘢𝘳𝘬: '#047857',

    },

  },

}

Use it in HTML:

<𝘣𝘶𝘵𝘵𝘰𝘯 𝘤𝘭𝘢𝘴𝘴="𝘣𝘨-𝘣𝘳𝘢𝘯𝘥 𝘵𝘦𝘹𝘵-𝘸𝘩𝘪𝘵𝘦 𝘱𝘹-4 𝘱𝘺-2 𝘳𝘰𝘶𝘯𝘥𝘦𝘥">𝘊𝘭𝘪𝘤𝘬 𝘔𝘦</𝘣𝘶𝘵𝘵𝘰𝘯>

✅ Final Step: Build Your CSS

𝗥𝘂𝗻 𝘁𝗵𝗲 𝗖𝗟𝗜 𝘁𝗼 𝘄𝗮𝘁𝗰𝗵 𝗳𝗼𝗿 𝗰𝗵𝗮𝗻𝗴𝗲𝘀:

𝘯𝘱𝘹 𝘵𝘢𝘪𝘭𝘸𝘪𝘯𝘥𝘤𝘴𝘴 -𝘪 ./𝘴𝘳𝘤/𝘪𝘯𝘱𝘶𝘵.𝘤𝘴𝘴 -𝘰 ./𝘱𝘶𝘣𝘭𝘪𝘤/𝘰𝘶𝘵𝘱𝘶𝘵.𝘤𝘴𝘴 --𝘸𝘢𝘵𝘤𝘩

👉 Want professional setup & customization for your website? Let’s connect:

🔗 𝗙𝗶𝘃𝗲𝗿𝗿 𝗚𝗶𝗴: https://www.fiverr.com/s/5rB9GRz

#TailwindCSS #WebDevelopment #Frontend #CSS #MostafizShabbir