Skip to main content

Environment

Create Vite App​

npm create vite@latest myapp -- --template react

安裝Tailwind​

npm i tailwindcss @tailwindcss/vite
  • inside vite.config file, edit the following:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tailwindcss from '@tailwindcss/vite';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

修改index.css​

  • inside src/index.css file, edit the following:
@import  'tailwindcss';

建立tailwind.config.js​

  • 在根目錄建立一個檔案tailwind.config.js
(裡面是空白的,建立它主要是讓tailwind intellisense 可以用)

修改App.js​

  • 刪掉app.css,然後將app.jsx中修改為以下:
import React from 'react';
const App = () => {
  return (
    <div>App</div>
  )
}
export default App;

安裝TanStack Query​

  • TanStack Query is for data fetching
npm i @tanstack/react-query
  • 然後在main.jsx修改為以下:
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>,
)

執行dev​

npm run dev