What is Tailwind CSS?
Tailwind CSS is a "utility-first" CSS framework that provides a wide variety of CSS classes and tools that lets you easily get started styling your website or application.
Setting up Tailwind in an Angular Project
Step 1: Create a new Angular project if you don’t have one set up already.
ng new your-project-name
cd your-project-name
Step 2: Install tailwindcss via any of the following package managers npm or yarn.
Before installing the packages turn off your angular development server.
This command is for the npm users
npm install -D tailwindcss postcss autoprefixer
or
This command is for the Yarn users
yarn add -D tailwindcss postcss autoprefixer
What is Post CSS?
PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. Post CSS
What is Autoprefixer?
Autoprefixer is a PostCSS plugin that parses your CSS and adds vendor prefixes. AutoPrefixer
Step 3: After installation of the above packages it's important to generate a configuration file for tailwind
npx tailwindcss init
this command will create a file tailwind.config.js
Step 4: Configuring the template paths
Add these lines in the tailwind.config.js so that it will compile the tailwind classes used in your project template.
module.exports = {
content: ["./src/**/*.{html,ts}"],
theme: {
extend: {},
},
plugins: [],
};
Step 5: in your global styles.css / styles.scss file Add these three lines of code
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 6: add the tailwind class inside the app.component.html To know that the tailwind is set up correctly.
<div class="flex h-screen items-center justify-center">
<h1 class="text-3xl font-bold underline">The Tech Chronicle</h1>
</div>
Now start your angular development server
ng serve
Expected Output:
