Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – React TailwindCSS not installing

I’m trying to learn React, but I’ve tried with videos, documentation, everything I could, but it’s not working. It’s not throwing any errors.
If it were up to me, I would use Bootstrap, but since I’m an intern, my workplace wants me to use Tailwind.

(I using Ubuntu Linux)

I’ve looked at the documentation and tried following the videos. Often, I’ve integrated the files into different places

Tags:

2

Answers


  1. 0

    What error do you see? Can you share reproducible example in Stackblitz or Codesandbox?

    Assuming you are using NPM, you can follow instructions

    1. Install dependencies
    npx create-react-app my-project
cd my-project
    1. Install tailwindcss via npm, and then run the init command to generate your tailwind.config.js file.
    npm install -D tailwindcss
npx tailwindcss init
    1. Add the paths to all of your template files in your tailwind.config.js file.
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
    1. Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
    @tailwind base;
@tailwind components;
@tailwind utilities;
    1. Start the project and it should work as expected
    npm run start

    See https://tailwindcss.com/docs/guides/create-react-app for details

    Login or Signup to reply.
  2. 0

    Requirements:
    Make sure you have npm and node installed!

    Docs recomend to use the react-app with Vite.js. Not the basic react boilerplate.

    https://tailwindcss.com/docs/guides/vite

    https://medium.com/@pushpendrapal_/how-to-setup-react-typescript-and-tailwind-css-with-vite-in-a-project-8d9b0b51d1bd

    1. if creating new app start here:
        npm create vite@latest my-project -- --template react
    cd my-project
    1. if addig to existing project start here:
        npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
    1. at – tailwind.config.js
    
    /** @type {import('tailwindcss').Config} */
    export default {
      content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }
    1. replace contents of the index.css with:
        @tailwind base;
    @tailwind components;
    @tailwind utilities;

    Now you should be able to write the tailwind code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search