DEV Community

Cover image for Setup TailwindCSS in Angular the easy way

Setup TailwindCSS in Angular the easy way

Pato on February 11, 2021

In this tutorial, I'm going to show you how to integrate TailwindCSS to your Angular project the EZ EZ way. This tutorial is for people that want ...
Collapse
 
1antares1 profile image
1antares1

Do you understand that for Ionic 5 the installation would be the same?
I follow this tutorial but it seems somewhat extensive...

blog.andrewbrey.com/2020-07-06-usi...

Collapse
 
devpato profile image
Pato

I have not tried it. If you follow mine that is shorter let me know if it works with Ionic. I will credit you on the article

Collapse
 
1antares1 profile image
1antares1

Yes it worked for me, but partially. For example, I had to do the imports from the file global.scss

/* Tailwind files */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

And in the file tailwind.config.js, add the following colors in the property theme, being this way:

    theme: {
        extend: {},
        colors: {
            primary: {
                default: 'var(--ion-color-primary)',
                shade: 'var(--ion-color-primary-shade)',
                tint: 'var(--ion-color-primary-tint)',
            },
            secondary: {
                default: 'var(--ion-color-secondary)',
                shade: 'var(--ion-color-secondary-shade)',
                tint: 'var(--ion-color-secondary-tint)',
            },
            tertiary: {
                default: 'var(--ion-color-tertiary)',
                shade: 'var(--ion-color-tertiary-shade)',
                tint: 'var(--ion-color-tertiary-tint)',
            },
            light: {
                default: 'var(--ion-color-light)',
                shade: 'var(--ion-color-light-shade)',
                tint: 'var(--ion-color-light-tint)',
            },
            medium: {
                default: 'var(--ion-color-medium)',
                shade: 'var(--ion-color-medium-shade)',
                tint: 'var(--ion-color-medium-tint)',
            },
            dark: {
                default: 'var(--ion-color-dark)',
                shade: 'var(--ion-color-dark-shade)',
                tint: 'var(--ion-color-dark-tint)',
            },
            success: {
                default: 'var(--ion-color-success)',
                shade: 'var(--ion-color-success-shade)',
                tint: 'var(--ion-color-success-tint)',
            },
            warning: {
                default: 'var(--ion-color-warning)',
                shade: 'var(--ion-color-warning-shade)',
                tint: 'var(--ion-color-warning-tint)',
            },
            danger: {
                default: 'var(--ion-color-danger)',
                shade: 'var(--ion-color-danger-shade)',
                tint: 'var(--ion-color-danger-tint)',
            },
            step: {
                '50': 'var(--ion-color-step-50)',
                '100': 'var(--ion-color-step-100)',
                '150': 'var(--ion-color-step-150)',
                '200': 'var(--ion-color-step-200)',
                '250': 'var(--ion-color-step-250)',
                '300': 'var(--ion-color-step-300)',
                '350': 'var(--ion-color-step-350)',
                '400': 'var(--ion-color-step-400)',
                '450': 'var(--ion-color-step-450)',
                '500': 'var(--ion-color-step-500)',
                '550': 'var(--ion-color-step-550)',
                '600': 'var(--ion-color-step-600)',
                '650': 'var(--ion-color-step-650)',
                '700': 'var(--ion-color-step-700)',
                '750': 'var(--ion-color-step-750)',
                '800': 'var(--ion-color-step-800)',
                '850': 'var(--ion-color-step-850)',
                '900': 'var(--ion-color-step-900)',
                '950': 'var(--ion-color-step-950)',
            },
        },
    },...
Enter fullscreen mode Exit fullscreen mode

What remains for me is to be able to compile the CSS so that only the classes used use me, for now the utilities are imported completely :/

But it is an advance hehe!

If you want to see the complete code with Tailwind integrated in Angular 11.2 + Ionic 5, here is a baseline maintained by the Ionic Dominicana community 🥰:
🔗github.com/ionic-dominicana/ionic-...

Thank you for this article, dear.

Collapse
 
brandonpittman profile image
Brandon Pittman

space-y-4 === 1rem not 4px

Collapse
 
devpato profile image
Pato

Thank you

Collapse
 
1antares1 profile image
1antares1

How would you resolve this error with SCSS Files?
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
devpato profile image
Pato • Edited

That's more of a linter issue since it's not used to this type of Syxtax. If I find a way to resolve it I will let you know BUT this shouldn't affect if your app works or not

Collapse
 
pelx profile image
Laura

it does. an app doesn't work!

Thread Thread
 
devpato profile image
Pato

Can you send me a link to your code? mine is working perfectly fine. Also, see the github repo link I posted at the end of the tutorial

Thread Thread
 
pelx profile image
Laura

I added this:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

.nav-bar {
@apply border-t block no-underline hover:underline py-2 text-grey-darkest hover:text-black md:border-none md:p-0;
}

to my styles.scss file. It will not compile. If I add teh same classes to HTML, it works fine.

ERROR::
Error: ./src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(7:4) C:\dev_dev\tailwind-app\styles.scss The text-grey-darkest class does not exist. If you're sure that text-grey-darkest exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

cheers
Laura

Thread Thread
 
devpato profile image
Pato

Interesting can you post your tailwind.config.js or send me a link to your repo? I would love to help :)

Thread Thread
 
pelx profile image
Laura

Hi Pato, this is very kind. I have created a repo: github.com/pelx/tailwindcss-app
It actually works, the only problem i still cant nail is linting. I created stylelint.config.js Didn't work. cheers. Laura

Collapse
 
peyman98 profile image
Peyman

Thanks, what about purging unused classes? is it done automatically?

Collapse
 
chandlerbaskins profile image
Chandler Baskins • Edited

I don't believe its done for you but in your tailwind config file this may work...

purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devpato profile image
Pato

Did you see the updated section?

Thread Thread
 
chandlerbaskins profile image
Chandler Baskins

Nice! Thank you for the content ❤️

Thread Thread
 
devpato profile image
Pato

You are welcome sir!

Collapse
 
devpato profile image
Pato • Edited

I updated the tutorial with a purging section :) let me know if you think this sucks or it's good lol

Collapse
 
devpato profile image
Pato

I have updated the post with some purging instructions

Collapse
 
julgon2012 profile image
Julio 👹

Seguí todos tus pasos en un proyecto totalmente nuevo, de angular 11.2.0 y no funciona.
Además en este código plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],

hay 2 componentes que instalar y tú no lo dices.

Como te dijera en twitter, tu tutorial confunde más de lo que ayuda.

Collapse
 
devpato profile image
Pato • Edited

Hola Julio!

-Ya agregue mas pasos para que no te confundas Julio. Gracias por el feedback!

Saludos!

Collapse
 
yannic_420 profile image
Yannic Ellhotka

Thanks for the tutorial.
The only way I could get purging to work was to set the env variable "NODE_ENV" to "production". Does the CLI have the ability to do this automatically when a prodction build is generated?

Collapse
 
devpato profile image
Pato

Hi! Check out this thread let me know if it helps you

twitter.com/mgechev/status/1359892...

Collapse
 
kristher1619 profile image
Kristher Vidal • Edited

Thank you for this wonderful tutorial. I tried this using default setup and it is working.

However when tried it using multiple application setup but it doesn't work when I apply the tailwind classes directly in the html files. Although it does work when using @apply in the scss. files

This does not work

<div class="tw-font-bold">
Enter fullscreen mode Exit fullscreen mode

This work

div {
   @apply tw-font-bold;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devpato profile image
Pato

you mean a monorepo?

Collapse
 
kristher1619 profile image
Kristher Vidal

Yes. 1 Angular Workspace with multiple projects.

Thread Thread
 
kristher1619 profile image
Kristher Vidal

Finally got it to working..

First I enabled purge mode while on develop environment. Also I am linking to the wrong directories.

So for monorepo with multiple projects, purge directory should point inside the projects directory

....
 purge: { enabled: true, content: ["./projects/admin/src/**/*.html", "./projects/admin/src/**/*.ts"] },
....
Enter fullscreen mode Exit fullscreen mode


`

Collapse
 
psycomentis06 profile image
Amor Ali

Easy and simple tutorial, and I spent 7 hours to make it works!!. You may be wondering why ? I cloned the GitHub repo serve it and I had the same error. Because I'm using Node 10 while Tailwind v2 dropped Node 10 support. So if you have node v10 update it to 12 at least and things will work smoothly.
Please put notice to help people from spending their time trying to do this.

Collapse
 
rahiyansafz profile image
Rahiyan Safin • Edited

Could anyone help me out? i made an custom css dark toggle mode theme.
and i want to make it with the tailwind.

stackblitz.com/edit/angular-ivy-b9...

we know that the root of the angular project is app component, so i made like this in the custom css project,

  <a>NIGHT</a>
  <a>DAYa&gt;
</a>
Enter fullscreen mode Exit fullscreen mode

and app component ts:

isDarkEnable = false;
presentTheme$ = new BehaviorSubject('theme-light');

constructor() {}

ngOnInit() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
this.presentTheme$.next(savedTheme);
}
}

changeTheme() {
this.presentTheme$.value === 'theme-light'
? this.presentTheme$.next('theme-dark')
: this.presentTheme$.next('theme-light');
localStorage.setItem('theme', this.presentTheme$.value);
this.isDarkEnable = !this.isDarkEnable;
}

and the global scss is:

.theme-light {
--primary: #2577c1;
--secondary-bg: #fff;
--theme: #fff;
--header-color: rgb(194, 63, 226);
--route-link-active: #fff;
--link-color: rgb(85, 80, 80);
--border-color: rgb(85, 80, 80);
}

.theme-dark {
--primary: rgb(255, 80, 11);
--secondary-bg: #424242;
--theme: #424242;
--header-color: var(--theme);
--route-link-active: rgb(255, 80, 11);
--link-color: #fff;
--border-color: rgb(28, 214, 28);
}

now could anyone help me how to modify it in the tailwind?

Collapse
 
johanchouquet profile image
Johan CHOUQUET

Hi there,

Thanks a lot for this.

As you probably know, in sass, the @import syntax is not the recommended way of importing. We should use @use instead.
So, what about changing those @import to @use ? Would that still work as expected ?

Collapse
 
dylut2000 profile image
Hardy Lutula

wow.. thanks alot
this is really helpful

Collapse
 
misticwonder profile image
Andrey Korovin

I would recommend this approach github.com/mw-angular/toolbox/tree...
It is very useful when you need to use tailwind in library (i.e. design-system)

Collapse
 
ahmedayman0 profile image
Ahmed Ayman Elkemary

Shouldn't we build css to make tailwind directive @apply work properly?

Collapse
 
initvik profile image
Vikas

Please add the postcss configuration in the article seems like its missing

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mafer23 profile image
Maria Fernanda Palencia

thakns and you