Tailwind Workshop

✨ TAILWINDCSS WORKSHOP

Today you're all going to build your very own landing page, using the Tailwind CSS framework and a few other tools!

💭 Assignment

A travel agency contacts you to create a landing page for [insert your dream destination here]. The page needs to be aesthetically pleasing in order to get the attention of potential travelers.

In short: create a landing page for your dream destination!

🐙 Github

Create a repository named tailwind-intro
Be sure to have a README.md file, so that you can link to your final live version on Netlify.
Clone it to your laptop.
Create a styles folder

📓 Installing Tailwind

npm init -y
npm install tailwindcss postcss-cli postcss autoprefixer
npx tailwind init -p

Make sure you now have a file postcss.config.js with:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Make sure you now have a file tailwind.config.js with:

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Create a file tailwind.css in your styles folder.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Download the landing page template from Tailwind Starter Kit. Rename the html file from landing.html to index.html. Don't forget to copy the folder assets also into your repository.
In your index.html add:

<link href="./styles/tailwind.output.css" rel="stylesheet" />

In your file package.json add the following in your scripts array:

"tailwind": "postcss ./styles/tailwind.css -o ./styles/tailwind.output.css"

npm run tailwind

💼 Optional but Recommended

Install IntelliSense for Visual Studio Code

🎨 Optional but fun: Colors

All the tailwind colors available to you. There are some that are extra and not available to you straight away.

You can gain access to them by adding the following code to your file tailwind.config.js:

const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    colors: {
      // Build your palette here
      emerald: colors.emerald,
      yellow: colors.amber,
    },
  },
};

The emerald and yellow are just aliases for the colors, and this is how you will access them in your htlm. So yellow text will be: text-yellow.
Adding custom colors to the default tailwind colors is as easy as:

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
        'indigo-lighter': '#b3bcf5',
        'indigo-dark': '#202e78',
      },
    },
  },
};

If the code confuses you a handy tool is Tailwind Colors.

🌟 Creating Your Own Components

When you decide that you are happy with your design, you can start extracting your own components from it so that you don't have to re-type the same code in different places.

You will have to create a class for the element you are styling and put all the tailwind classes into an @apply directive.

A practical example:

<button class="btn-indigo">Click me</button>

<style>
  .btn-indigo {
    @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
  }
</style>

But... instead of putting it in our css we are going to inject it into our file tailwind.css, which will then look like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

By doing this Tailwind will automatically move those styles to the same place as @tailwind components, so you don't have to worry about getting the order right in your source files. You can extract as many components as you want!

🎩 Purging Tailwind

Go to file tailwind.config.js
Add the following code to your purge array:


 './**/*.html', './**/*.js',

npm run tailwind

🚀 (Really) Optional Final Touch

Integrate the AOS CDN and get things moving!
I will make things easy for you and give you the CDN links to add.

CSS:

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />

<script src='https://unpkg.com/[email protected]/dist/aos.js'></script>

Create an index.js file and add the following code to initialize:

<script>AOS.init();</script>

Upload it to Netlify, so that others can see your creation!
Don't forget to add a file .gitignore with the following code node_modules before you push to github and upload!

💥 DON'T FORGET TO HAVE FUN

🧘🏽‍♀️ Helpful Links

🛠 Tools

👩🏻‍💻 License

Top categories