If you’re working in a JavaScript framework like React or Vue that supports directly importing CSS files into your JS, you can also skip creating a CSS file altogether and importtailwindcss/tailwind.cssinstead which has all of these directives already in place: ...
Super simple, 1 minute installation Easy theming and customization Free hosting Get started Compatible with top frameworks & tools Explorededicated packagesfor most popular tools: Standard Tailwind React 18 Figma Join waitlist Join waitlist ...orintegratestandard TW Elements with your favourite tool: ...
import{styled}from'react-tailwind-variants';constButton=styled('button',{base:'text-base'variants:{variant:{none:null,filled:'bg-blue-500 text-white',outlined:'border border-blue-500 text-blue-500',plain:'bg-transparent text-blue-500',},size:{sm:'px-3 py-1.5'md:'px-4 py-2'lg:'px...
import{Button,createTheme,ThemeProvider}from"flowbite-react";constcustomTheme=createTheme({button:{color:{primary:"bg-red-500 hover:bg-red-600",secondary:"bg-blue-500 hover:bg-blue-600",},size:{lg:"px-6 py-3 text-lg",},},});functionApp(){return(<ThemeProvider theme={customTheme}><B...
"dayjs": "^1.11.6", "react": "^17.0.2 || ^18.2.0" Simple Usage Tailwindcss Configuration Add the datepicker to your tailwind configuration using this code // in your tailwind.config.jsmodule.exports={// ...content:["./src/**/*.{js,jsx,ts,tsx}","./node_modules/react-tailwind...
https://tailwindcss.com/docs/installation官方文档介绍的非常详细了,以 create-react-app 为例: 第一步,安装 tailwind,生成相对应的配置文件: npm install -D tailwindcss // yarn add tailwindcss -D npx tailwindcss init 文件变化,主要是生成一份配置文件: ...
Create a new project with React 19: pnpm create vite --template=react-ts Follow the official guide to add Tailwind CSS: https://tailwindcss.com/docs/installation/using-vite Add path aliases to tsconfig.json: { "files": [], "references": [ { "path": "./tsconfig.app.json" }, ...
Create React App Set up a modern web app by running one command. Remix Full stack web framework that lets you focus on the user interface. Vite Flexible programmatic APIs with full TypeScript typing. Astro All-in-one web framework designed for speed. ...
import { useEffect, useState } from 'react' import Head from 'next/head' import Link from 'next/link' export default function Home() { const [theme, setTheme] = useState('light') const onToggleTheme = e => { if (e.target.checked) { setTheme('dark') localStorage.theme = 'dark' doc...
It can often be useful to reference your configuration values in your own client-side JavaScript — for example to access some of your theme values when dynamically applying inline styles in a React or Vue component. To make this easy, Tailwind provides a resolveConfig helper you can use to ...