How to Set Up Tailwind Locally

Learn how to set up Tailwind from scratch on your local machine.

We'll cover the following

How to set up Tailwind

In order to work with Tailwind, we need to set it up. To make Tailwind work with Svelte, we need to install three dependencies:

  • tailwindcss: This refers to Tailwind itself.

  • postcss: This package is responsible for transforming styles via JavaScript. For example, it automatically scopes your CSS to avoid global name collision. It also warns us of CSS errors that we would otherwise only notice on the UI in the form of broken styles.

  • autoprefixer: This is another peer dependency that is used for adding vendor prefixes for better browser support. For example, we don't have to worry about manually adding support for Firefox or Safari separately because `autoprefixer` will handle it for us.

Use the following command inside your terminal to install these dependencies together:

Get hands-on with 1200+ tech skills courses.