/Javascript/React/Create react app and tailwind

Create react app and tailwind

1. npx create-react-app .

2. npm i -D tailwindcss postcss-cli autoprefixer 
or
npm install tailwindcss@latest postcss@latest autoprefixer@latest
//postcss - transform our compile css 
// autoprefixer - set vendor prefixes within our css automatically when needed

//Generate npc config file
3.npx tailwind init tailwind.js --full

// Create post css config file
4. touch postcss.config.js

//open postcss.config.js
//add this to the file
__________________________________________
const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    tailwindcss('./tailwind.js'),
    require('autoprefixer')
  ]
}
__________________________________________

5. inside scr, create assets folder src/assets
- create tailwind.css and main.css

in tailwind, add this code
//this will compile to the main css that will include in our app
___________________________________________
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
___________________________________________

6. Open package.json and add this iside the scripts
___________________________________________
   "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
____________________________________________
7. run 'npm start'


add this to index.js
_____________________________________
import React from 'react';
import ReactDOM from 'react-dom';
import './assets/main.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
_________________________________


install router

1. npm i --save react-router-dom

Source: smashingmagazine.com

How to properly install tailwind css in react

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Source: smashingmagazine.com

How to setup tailwind for reactjs

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

Source: tailwindcss.com

Similar codes

6 votes199 views2 answers
Export default function react
Javascript React
0 vote200 views1 answer
Reduce to calculate sum react
Javascript React
2 votes227 views4 answers
Discord js remove reaction from user
Javascript React
15 votes189 views6 answers
Form in react
Javascript React
3 votes207 views1 answer
Navigation react pass props
Javascript React
0 vote191 views1 answer
React bootstrap col not working
Javascript React
114 votes213 views3 answers
React init
Javascript React
0 vote179 views1 answer
React script syntax for deployment
Javascript React
0 vote231 views1 answer
Corousal in react
Javascript React
3 votes236 views1 answer
Could not resolve dependency: npm ERR! peer react@"17.0.1" from [email protected]
Javascript React