adamwathan / cra-tailwind-3

27 stars 3 forks source link

not working with typescript #2

Open mujehoxe opened 2 years ago

mujehoxe commented 2 years ago

how to add typescript support to an existing cra-tailwind-3

mujehoxe commented 2 years ago

tsconfig.json '{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", "noFallthroughCasesInSwitch": true }, "include": [ "src" ] } ' package.json { "name": "student-area", "version": "0.1.0", "private": true, "dependencies": { "@heroicons/react": "^1.0.5", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "^4.0.3", "web-vitals": "^1.0.1" }, "scripts": { "start": "concurrently \"yarn run start:css\" \"react-scripts start\"", "start:css": "tailwindcss -o src/tailwind.css --watch", "build": "yarn run build:css && react-scripts build", "build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/jest": "^27.0.3", "@types/node": "^16.11.12", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", "autoprefixer": "^10.4.0", "concurrently": "^6.4.0", "postcss": "^8.4.4", "tailwindcss": "^3.0.1", "typescript": "^4.5.3" } }

mujehoxe commented 2 years ago

Screenshot from 2021-12-11 12-27-29

mujehoxe commented 2 years ago

tailwind.config.js

module.exports = {
    content: [
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
mujehoxe commented 2 years ago

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}