Tailwind CSS has become a popular choice among developers for its utility-first approach to styling. It offers a highly customizable and efficient way to design web applications without writing custom CSS. In this guide, we'll walk you through setting up a Tailwind CSS project from scratch.
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup. Unlike traditional CSS frameworks like Bootstrap or Foundation, Tailwind doesn't come with pre-designed components. Instead, it provides a set of utility classes that let you design your components without leaving your HTML.
Before we begin, ensure you have the following installed:
You can download and install Node.js and npm from the official website.
First, create a new directory for your project and navigate into it:
mkdir tailwind-project cd tailwind-project
Next, initialize a new npm project:
npm init -y
This command creates a package.json file, which will keep track of your project dependencies and scripts.
To install Tailwind CSS, you need to add it as a dependency to your project. Run the following command:
npm install tailwindcss
After installing Tailwind CSS, you'll need to create a configuration file. This file will allow you to customize the default settings of Tailwind CSS. To generate this file, run:
npx tailwindcss init
This command creates a tailwind.config.js file in your project root. This file is where you can customize your Tailwind setup.
Open the tailwind.config.js file. You should see a basic configuration like this:
module.exports = { content: [], theme: { extend: {}, }, plugins: [], }
The content array is used to specify the paths to all of your template files. This allows Tailwind to tree-shake unused styles in production. Add the paths to your HTML and JavaScript files:
module.exports = { content: [ './src/**/*.{html,js}', ], theme: { extend: {}, }, plugins: [], }
This configuration tells Tailwind to look for classes in any .html or .js file inside the src directory.
Next, create a new CSS file where you will import Tailwind's base, components, and utilities styles. Create a src directory and inside it, create a file named styles.css:
mkdir src touch src/styles.css
Open the styles.css file and add the following imports:
@tailwind base; @tailwind components; @tailwind utilities;
These directives tell Tailwind to include its base, components, and utilities styles in your CSS file.
To compile your CSS, you'll need to use the Tailwind CLI. Add a build script to your package.json file:
"scripts": { "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css", "watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch" }
The build script compiles your src/styles.css file and outputs the result to dist/styles.css. The watch script does the same but continues to watch for changes and recompiles automatically.
To compile your CSS for the first time, run:
npm run build
This command creates a dist directory with the compiled styles.css file.
Now, create an index.html file in the src directory:
touch src/index.html
Open the index.html file and add the following boilerplate HTML:
Tailwind CSS Project Hello, Tailwind CSS!
This simple HTML file includes the compiled Tailwind CSS file and adds a styled heading.
To see your changes, open the index.html file in a web browser.
When you're ready to deploy your project, you'll want to optimize your CSS for production. Tailwind provides a built-in tool for purging unused styles and minifying your CSS.
To enable this, update your tailwind.config.js file to include the purge option:
module.exports = { content: [ './src/**/*.{html,js}', ], theme: { extend: {}, }, plugins: [], }
Next, install @fullhuman/postcss-purgecss and cssnano:
npm install @fullhuman/postcss-purgecss cssnano
Create a postcss.config.js file in your project root and add the following configuration:
const purgecss = require('@fullhuman/postcss-purgecss'); const cssnano = require('cssnano'); module.exports = { plugins: [ purgecss({ content: ['./src/**/*.{html,js}'], defaultExtractor: content => content.match(/[\w-/:]+(?
登入後複製
This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.
Finally, update your build script in package.json:
"scripts": { "build": "NODE_ENV=production tailwindcss -i ./src/styles.css -o ./dist/styles.css" }
Run the build script to generate your optimized CSS:
npm run build
Your dist/styles.css file is now optimized for production.
Setting up a Tailwind CSS project from scratch is straightforward and provides a powerful toolkit for building custom designs. By following this guide, you've learned how to install Tailwind CSS, configure it, and optimize it for production. Tailwind's utility-first approach streamlines the styling process, allowing you to focus on building your application.
Happy coding!
以上是Setting Up a Tailwind CSS Project from Scratch的詳細內容。更多資訊請關注PHP中文網其他相關文章！
