https://github.com/roc41d/angular-tailwindcss-integration
Install Tailwind CSS with Angular
https://github.com/roc41d/angular-tailwindcss-integration
angular tailwindcss
Last synced: 2 months ago
JSON representation
Install Tailwind CSS with Angular
- Host: GitHub
- URL: https://github.com/roc41d/angular-tailwindcss-integration
- Owner: roc41d
- Created: 2024-07-11T13:34:14.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-11T13:34:45.000Z (almost 2 years ago)
- Last Synced: 2025-08-28T13:30:38.925Z (10 months ago)
- Topics: angular, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 125 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Install Tailwind CSS with Angular
Setting up Tailwind CSS in an Angular project.
## Install Tailwind CSS
Install `tailwindcss` via npm, and then run the init command to generate a `tailwind.config.js` file.
```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```
## Configure your template paths
Add the paths to all of your template files in your `tailwind.config.js` file.
```
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
```
## Add the Tailwind directives to your CSS
Add the `@tailwind` directives for each of Tailwind’s layers to your `./src/styles.css` file.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## Start using Tailwind in your project
```
Hello world!
```
## Start your build process
Run your build process with ng serve.
```
ng serve
```