install latest tailwindcss

First add tailwind and postcss npm install tailwindcss postcss autoprefixer postcss-cli Initialize tailwindcss npx tailwindcss init Create a "postcss.config.js" and paste the following in it module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] } Create the necessary files mkdir public mkdir public/styles touch public/styles/tailwind.css touch public/styles/style.css Paste the following in public/styles/tailwind.css @tailwind base; @tailwind components; @tailwind utilities; The last thing is to add this to the scripts in package.json "tailwind:css": "postcss public/styles/tailwind.css -o public/styles/style.css"

# If you're on Next.js v10 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # Or yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest # If you're on Next.js v9 or older npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

tailwind install

Step 1:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Step 2:

npm install @craco/craco

Step 3:

package.json: 
{
    // ...
    "scripts": {

     "start": "craco start",

     "build": "craco build",

     "test": "craco test",

     "eject": "react-scripts eject"
    },
}

Step 4:

create craco.config.js at root

craco.config.js: 
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Step 5:

npx tailwindcss-cli@latest init

Step 6:

// tailwind.config.js at root
  module.exports = {

   purge: [],

   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Step 7:

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Posted by: Guest on October-20-2021

npx create-react-app app_name npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 npm install @craco/craco Rimpiazza nel package.json: "start": "craco start", "build": "craco build", "test": "craco test", Crea il file di configurazione: // craco.config.js module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, } Crea il file tailwind.config.js npx tailwindcss-cli@latest init Ottimizzazioni: // tailwind.config.js mode: "jit", purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], Includere tailwind: /* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities;

Code answers related to "install latest tailwindcss"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Answers for "install latest tailwindcss"

Code answers related to "install latest tailwindcss"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us