DEV Community


Discussion on: Setup TailwindCSS in Angular the easy way

1antares1 profile image

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

devpato profile image
Pato Author

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

1antares1 profile image

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 🥰:

Thank you for this article, dear.