top of page
  • Writer's pictureSolve It

#1 Guide to Setting Up StoreStreamUi17: Your Angular Project with Tailwind CSS

Updated: Dec 18, 2023


Welcome to this comprehensive guide on setting up your Angular project, StoreStreamUi17, with the latest Tailwind CSS. Whether you're a seasoned developer or just starting, this post will walk you through each step to get your project up and running smoothly.


Step 1: Install Node.js and npm

For Linux Users

Start by installing Node.js and npm on your Linux system. Open your terminal and run the following commands:

sudo apt install nodejs 
sudo apt install npm

For Windows and Mac Users

If you're using Windows or Mac, you can download Node.js and npm from the official website. Simply visit the link below and choose the appropriate version for your operating system.


Step 2: Install Angular CLI

Angular CLI is a vital tool for Angular development. Install it globally using npm by running the following command:

npm install -g @angular/cli@17

Step 3: Create a New Project

With Angular CLI installed, you can now create a new Angular project named StoreStreamUi17:

ng new store-stream-ui17

Step 4: Install Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows for rapid UI development. Install the latest version of Tailwind CSS along with its dependencies using npm:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

After installation, initialize Tailwind CSS:

npx tailwindcss init

Step 5: Configure Your Template Paths

Modify your tailwind.config.js file to include the paths to all of your Angular template files. This configuration ensures Tailwind can apply its styles correctly. Update the file as follows:


module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{html,ts}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Step 6: Add Tailwind to Your Global Styles

To use Tailwind in your project, add its directives to your ./src/styles.css file. These directives include base, components, and utilities:

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

Step 7: Start Your Development Server

Finally, it's time to see your project come to life. Run your development server using the command below:

ng serve

Navigate to http://localhost:4200/ in your web browser. You'll see your new Angular project running, with Tailwind CSS ready for styling your application. The best part? The application will automatically reload if you change any of the source files, making development a breeze.

34 views0 comments

Comments


bottom of page