Setting up Angular 4 with TailwindCSS

Question

Setting up Angular 4 with TailwindCSS

Can TailwindCSS be configured with Angular (4+)?

I am willing to eject the Angular project in order to make webpack configuration accessible. However, I am uncertain about what needs to be included in the webpack.config.js file to ensure that TailwindCSS integrates smoothly with Angular's internals.

It would be ideal to have a setup that allows me to use a single command for development (such as npm start) and continue to have changes in files watched, including CSS. The same convenience should apply when building the project.

css angular configure tailwind-css

Answer 1

Answer №1

Option 1: (using ng-eject)

If you're looking to integrate Sass and TailwindCSS into your Angular project, follow the steps outlined in this informative video by Tom Gobich:

Begin by incorporating Sass into your project with the command:
```
$ ng new project --style=scss
```

Next, install tailwindcss and generate the config file:

$ cd project
$ npm install tailwindcss --save-dev 
$ ./node_modules/.bin/tailwind init tailwind.config.js

Eject your app to output the webpack configuration file and resolve new dependencies:
```
$ ng eject
$ npm install
```

Add the tailwindcss plugin to your webpack.config.js file:

const tailwindcss = require('tailwindcss');
...

const postcssPlugins = function () {
   ...
   return [
      postcssUrl({
        ...
      }),
      tailwindcss('./tailwind.config.js'),
      autoprefixer(),
      ...
 };

Include the @tailwind directives in your src/styles.scss file:

@tailwind preflight;

// custom components here.

@tailwind utilities;

// custom utilities here.

Create your tailwind components or import sample code into src/app/app.component.html for testing purposes, then run:
```
$ npm start
```

Option 2: (without ng-eject)

If you prefer not to use ng-eject, you can refer to this helpful article by @hackafro (Richard Umoffia) on utilizing Tailwind's CLI to process your stylesheet:

$ ng new project
$ cd project
$ npm install tailwindcss --save-dev 
$ ./node_modules/.bin/tailwind init tailwind.config.js

Create a new file called tailwind-build.css at the same level as styles.css, and include the following content:

@tailwind preflight;

// custom components here.

@tailwind utilities;

// custom utilities here.

In your package.json file, add these scripts under the script attribute:

{
  ...
  "scripts": {
    ...
    "tailwind": "./node_modules/.bin/tailwind build ./src/tailwind-build.css -c ./tailwind.config.js -o ./src/styles.css",
    "prestart": "npm run tailwind"
  }
},

By running npm run tailwind whenever you start your server, Tailwind's CLI will populate the content of ./src/styles.css efficiently, thanks to angular-cli applying postCSS plugins like autoprefixer. Learn more about this process here.

Answer 2

Option 1: (using ng-eject)

If you're looking to integrate Sass and TailwindCSS into your Angular project, follow the steps outlined in this informative video by Tom Gobich:

Begin by incorporating Sass into your project with the command:
```
$ ng new project --style=scss
```

Next, install tailwindcss and generate the config file:

$ cd project
$ npm install tailwindcss --save-dev 
$ ./node_modules/.bin/tailwind init tailwind.config.js

Eject your app to output the webpack configuration file and resolve new dependencies:
```
$ ng eject
$ npm install
```

Add the tailwindcss plugin to your webpack.config.js file:

const tailwindcss = require('tailwindcss');
...

const postcssPlugins = function () {
   ...
   return [
      postcssUrl({
        ...
      }),
      tailwindcss('./tailwind.config.js'),
      autoprefixer(),
      ...
 };

Include the @tailwind directives in your src/styles.scss file:

@tailwind preflight;

// custom components here.

@tailwind utilities;

// custom utilities here.

Create your tailwind components or import sample code into src/app/app.component.html for testing purposes, then run:
```
$ npm start
```

Option 2: (without ng-eject)

If you prefer not to use ng-eject, you can refer to this helpful article by @hackafro (Richard Umoffia) on utilizing Tailwind's CLI to process your stylesheet:

$ ng new project
$ cd project
$ npm install tailwindcss --save-dev 
$ ./node_modules/.bin/tailwind init tailwind.config.js

Create a new file called tailwind-build.css at the same level as styles.css, and include the following content:

@tailwind preflight;

// custom components here.

@tailwind utilities;

// custom utilities here.

In your package.json file, add these scripts under the script attribute:

{
  ...
  "scripts": {
    ...
    "tailwind": "./node_modules/.bin/tailwind build ./src/tailwind-build.css -c ./tailwind.config.js -o ./src/styles.css",
    "prestart": "npm run tailwind"
  }
},

By running npm run tailwind whenever you start your server, Tailwind's CLI will populate the content of ./src/styles.css efficiently, thanks to angular-cli applying postCSS plugins like autoprefixer. Learn more about this process here.

Answer 3

Answer №2

Utilizing chokidar with JavaScript, I created a solution to automatically build my tailwind files whenever changes are made since Angular (up to version 6.0.3) does not currently provide access to postcss plugins in CLI projects.

Here is the snippet from chokidar.js located at the top-level next to package.json:

const chokidar = require('chokidar')
const child = require('child_process')

const tailwind = chokidar.watch(['tailwind.js', './src/tailwind.css'])

tailwind.on('change', (event, path) => {
  child.exec('npm run build-tailwind')
  console.log('Reprocessing Tailwind Files')
})

Snippet from package.json scripts:

"scripts": {
  "ng": "ng",
  "build-tailwind": "./node_modules/.bin/tailwind build ./src/tailwind.css -c ./tailwind.js -o ./src/styles.css",
  "prestart": "npm run build-tailwind",
  "start": "ng serve & node chokidar.js",
  "build": "npm run prestart && ng build"
}

In the build-tailwind script, I placed tailwind.css in the src/ folder alongside styles.css for all custom CSS implementations within the tailwind project setup.

The contents of tailwind.css:

@tailwind preflight;

/* custom components */

@tailwind utilities;

/* custom utilities */

This workaround can be beneficial until Angular integrates direct support for post-css functionality.

UPDATE:

To simplify this process for others looking to leverage tailwind capabilities in Angular projects, I developed a CLI tool available on npm:

https://www.npmjs.com/package/ng-tailwindcss

Answer 4

Utilizing chokidar with JavaScript, I created a solution to automatically build my tailwind files whenever changes are made since Angular (up to version 6.0.3) does not currently provide access to postcss plugins in CLI projects.

Here is the snippet from chokidar.js located at the top-level next to package.json:

const chokidar = require('chokidar')
const child = require('child_process')

const tailwind = chokidar.watch(['tailwind.js', './src/tailwind.css'])

tailwind.on('change', (event, path) => {
  child.exec('npm run build-tailwind')
  console.log('Reprocessing Tailwind Files')
})

Snippet from package.json scripts:

"scripts": {
  "ng": "ng",
  "build-tailwind": "./node_modules/.bin/tailwind build ./src/tailwind.css -c ./tailwind.js -o ./src/styles.css",
  "prestart": "npm run build-tailwind",
  "start": "ng serve & node chokidar.js",
  "build": "npm run prestart && ng build"
}

In the build-tailwind script, I placed tailwind.css in the src/ folder alongside styles.css for all custom CSS implementations within the tailwind project setup.

The contents of tailwind.css:

@tailwind preflight;

/* custom components */

@tailwind utilities;

/* custom utilities */

This workaround can be beneficial until Angular integrates direct support for post-css functionality.

UPDATE:

To simplify this process for others looking to leverage tailwind capabilities in Angular projects, I developed a CLI tool available on npm:

https://www.npmjs.com/package/ng-tailwindcss

Answer 5

Answer №3

If you're looking for a more efficient method that doesn't involve ejecting the CLI or creating a specific npm script for tailwind, you can simply tap into your CLI's webpack loaders.

Start by installing

npm install -D @angular-builders/custom-webpack postcss-scss tailwindcss

Next, set up a custom configuration file named webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('tailwindcss')('./tailwind.config.js'),
          ]
        }
      }
    ]
  }
};

Update your angular.json file to utilize this new configuration:

...
"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "webpack.config.js"
    },
    ...
  }
},
...

Include the tailwind utilities in your styles.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, just run npm start and you'll be all set to use tailwind classes in your HTML or apply them in your SCSS files!

For a more detailed explanation, check out my blog post - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02

Answer 6

If you're looking for a more efficient method that doesn't involve ejecting the CLI or creating a specific npm script for tailwind, you can simply tap into your CLI's webpack loaders.

Start by installing

npm install -D @angular-builders/custom-webpack postcss-scss tailwindcss

Next, set up a custom configuration file named webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('tailwindcss')('./tailwind.config.js'),
          ]
        }
      }
    ]
  }
};

Update your angular.json file to utilize this new configuration:

...
"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "webpack.config.js"
    },
    ...
  }
},
...

Include the tailwind utilities in your styles.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, just run npm start and you'll be all set to use tailwind classes in your HTML or apply them in your SCSS files!

For a more detailed explanation, check out my blog post - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02

Answer 7

Answer №4

For those who encounter the issue of receiving the error message "atRule.before is not a function" after following Salem's solution, simply ensure all PostCSS dependencies are up to date with the latest version for seamless functionality.

Answer 8

For those who encounter the issue of receiving the error message "atRule.before is not a function" after following Salem's solution, simply ensure all PostCSS dependencies are up to date with the latest version for seamless functionality.

Setting up Angular 4 with TailwindCSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

jQuery is optimized to work specifically with select id tags

How can I customize the styling of an SVG pseudo element using Font Awesome 5?

The arrangement of bootstrap elements varies based on whether they are displayed in one or two columns

Ensure that the text is contained within a div element with a border-radius of 100%

Eliminate Angular Firebase Object and Storage

Problem with IE off-canvas scrolling

Issue with alignment of Bootstrap inline form field on top and bottom levels

Tips for marking a p-checkbox as selected and saving the chosen item to a list

Learn how to navigate through the extensive file structure in Eclipse's Project Explorer after compiling the Angular 2 tutorial 'Tour of Heroes'

Turning off and on CSS transitions to set the initial position

Fixed table layout prevents table cells from expanding inside a 100% width table row with absolute positioning, while also ensuring that the elements do not collapse

Process for generating Firebase users using Cloud Function

Button with small width containing an icon and text

utilizing a background image with a specific div identifier

Utilize specific CSS attributes from a class and apply them to a DOM element

Bootstrap navigation bar unresponsive on mobile devices

Updating the Animation for Datepicker Closure

When initially compiling Angular 5, an error (TS2339) may occur, but after a successful compilation, everything runs smoothly

React component for a background image with a gradient overlay

Error occurs when attempting to filter data through input text pasting in Angular