🎈 If You Are Not Using Tailwind CSS, You Are Wasting Time

STOP!

Before you tell me "Steve, Tailwind is fkn gross", know that, I agree. Kinda. I've never been happier to write CSS since attempting to use Tailwind 20 times, each time thinking, "this feels like my IQ is diminishing".

But you can only try to center a div so many times before you cave into another CSS library to do it for you. Tailwind turns your styling nightmare into more of an unpleasant dream... a good thing, I think.

Why Use Tailwind CSS? 🎨

Still using vanilla CSS? How quaint...

Here are the selling points of Tailwind:

• Speed: It's f**cking quick. Once you get use to it anyway, until then you'll be in and out of the docs like a honeymoon 🐓.

• Customisation: It's flexible, you can bend it to your will.

• Consistency: A consistent design system without wanting to head-butt your keyboard.

• Community: Because misery loves company, and Tailwind has a big one.

• Money: You like it.

Reasons not to use it

• You have self respect.

• You're a clean-freak - for the record, I'm so speccy that I alphabetise my object keys, JSX props and even css attributes (where possible), and I still, somehow, fell in love with Tailwind.

So give it a go. A few times. Until it sucks you in.

Have a look at the performance section on the Tailwind homepage to see just how brief it makes your code.

Righto, put your glasses on, geek, let's use it 🤓

Maybe a Next.js project? If you're using something else, well, you probably enjoy pain. The principles are similar, but your mileage may vary.

Step 1: Set Up a Next.js Project

Still haven't sold your soul to the Triangle Dealers (Vercel) since the last post? Now's the time.

This will generate you a next app:

1npx create-next-app css-geek

Step 2: Install Tailwind CSS

Navigate to your project directory and install Tailwind and its dependencies.

1cd css-geek
2npm install tailwindcss postcss autoprefixer
3npx tailwindcss init -p

The -p flag creates both tailwind.config.js and postcss.config.js files. Sourcery.

Step 3: Configure Your Templates

In your tailwind.config.js file, point Tailwind to your pages and components. If you're using app router, then, you know, point it to the right place (the files that will use Tailwind...).

1// tailwind.config.js
2
3module.exports = {
4  content: [
5    './pages/**/*.{js,ts,jsx,tsx}',
6    './components/**/*.{js,ts,jsx,tsx}',
7  ],
8  theme: {
9    extend: {},
10  },
11  plugins: [],
12}

Step 4: Add Tailwind to Your CSS

Create a styles/globals.css file (if it doesn't exist) and add the Tailwind directives.

1/* styles/globals.css */
2
3@tailwind base;
4@tailwind components;
5@tailwind utilities;

Step 5: Import the CSS File

Make sure your pages/_app.tsx file is importing the global CSS. Again, App router, import it to apps/web/src/app/layout.tsx instead.

1// pages/_app.js
2
3import '../styles/globals.css'
4
5function MyApp({ Component, pageProps }) {
6  return <Component {...pageProps} />
7}
8
9export default MyApp

Step 6: Start Using Tailwind Classes

Now comes the fun part. Replace your CSS with shiny new Tailwind classes.

1// pages/index.js
2
3export default function Home() {
4  return (
5    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
6      <h1 className="text-4xl font-bold text-blue-500">
7        No CSS Files!
8      </h1>
9    </div>
10  )
11}

Step 7: Customise Tailwind (Optional)

Because you're only good at dev if you have flashy gradients.

1// tailwind.config.js
2
3module.exports = {
4  // ...
5  theme: {
6    extend: {
7      colors: {
8        'brand-blue': '#1992d4',
9      },
10    },
11  },
12}

Now you can use bg-brand-blue in your classes. Congratulations, you're a designer now. A sh!tty one, but...

Congratulations! 🎉

You've successfully integrated Tailwind CSS into your Next.js app. Now you can build a horribly designed website without actually knowing any CSS. Fake it till you make it, or something.

If you really want to speed things up, check out DaisyUI. It offers a ton of UI classes on top of Tailwind CSS. So you can just use classes like btn or card to create UI components that were designed by people that actually know what they're doing.

It also ships with a ton of themes which you can see some of them in the navbar of this page!

There is a Faster Way 🚀

If reading through all that setup made you question your career choices, you're in luck. We've already done the heavy lifting.

The ShipNow Boost Template: a Next.js template with Tailwind (and sooo much more) already integrated. Here's what you get:

• 💸 Pre-integrated Stripe Setup: Start accepting payments immediately.

• 💅 Tailwind CSS Styling: A beautiful design without the headache.

• 🌼 DaisyUI: Cause Tailwind was a 90% job.

• 📧 Mailgun Integration: For all your email needs.

• 🔥 Firebase Backend: Authentication and real-time database included.

• 🛡 TypeScript Support: Because type safety is next to godliness.

• 📝 Storyblok headless CMS: This page was made with Storyblok (and the entire site was built on the boost template).

• And that's just the tip of the iceberg...

Stop Wasting Time on Boilerplate 🏎

I don't mean to make you squeal with excitement, but if you take a look at this, you'll see just how much time and money you can save by using this template. With our template, you can focus on what really matters – building features that set your product apart.

No divs were harmed in the making of this blog post. While we can't guarantee your design skills, using Tailwind CSS with the ShipNow Boost Template will certainly make your life easier.