The original answer is still below... Time has marched on since I originally asked this question. For example, I'm now targeting ES6 on modern browsers without Babel (the main reason why I was using Webpack). So I thought I might document my current solution (Tailwind cli installed with npm without Webpack) Assuming you have npm installed (part of node.js ). In the root of your project:
npm init -y
This will create a package.json file. This is what my file looks like:
NB - I made the name lowercase (the folder/project name is "Holly") - I was looking at the file using VS Code and there was a squiggly line!
Next, I install Tailwind:
npm install -D tailwindcss cross-env
I've also added cross-env - this is so I can run the same command on my dev machine (Windows) and in my GitHub Action. After that, generate the Tailwind config file:
This is based on a tutorial I found written by Chris Sainty (which I can't find at the moment). I did, however, find this rather excellent post by Chris on Adding Tailwind CSS v3 to a Blazor app . Though I think this version avoids the integration with Visual Studio. Make sure you copy and paste the NpmLastInstall element and the Target elements to their appropriate locations in your .csproj file. If you're in DEBUG mode, Visual Studio will execute npm run build . If you're in RELEASE mode, it'll execute npm run release . If you've just pulled the repo from the server, Visual Studio should be smart enough to automatically execute npm install . The only thing is, I don't think it'll run npm install when the package.json file has been updated - you'll need to remember to do that manually. Targeting npm in the .csproj file means that Tailwind will build when the ASP.NET Core project builds. Things will stay consistent - if you hit F5 you know the css is up-to-date! The Tailwind JIT is on by default - so Tailwind build times are negligible and do not add much to the total build time. One final thing. Because Tailwind css is updated by the Visual Studio project - it means the same thing happens in the cloud. Here's a cut down version of my GitHub Action:
name: production-deployment
on:
push:
branches: [ master ]
env:
AZURE_WEBAPP_NAME: holly
AZURE_WEBAPP_PACKAGE_PATH: './Holly'
DOTNET_VERSION: '6.0.x'
NODE_VERSION: '12.x'
jobs:
build-and-deploy-holly:
runs-on: ubuntu-latest
steps:
# Checkout the repo
- uses: actions/checkout@master
# Setup .NET Core 6 SDK
- name: Setup .NET Core ${{ env.DOTNET_VERSION }}
uses: actions/setup-dotnet@v1
with:
dotnet-version: ${{ env.DOTNET_VERSION }}
# We need Node for npm!
- name: Setup Node.js ${{ env.NODE_VERSION }}
uses: actions/setup-node@v1
with:
node-version: ${{ env.NODE_VERSION }}
# Run dotnet build and publish for holly
- name: Dotnet build and publish for holly
env:
NUGET_USERNAME: ${{ secrets.NUGET_USERNAME }}
NUGET_PASSWORD: ${{ secrets.NUGET_PASSWORD }}
run: |
cd '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}'
dotnet build --configuration Release /warnaserror
dotnet publish -c Release -o 'app'
# Deploy holly to Azure Web apps
- name: 'Run Azure webapp deploy action for holly using publish profile credentials'
uses: azure/webapps-deploy@v2
with:
app-name: ${{ env.AZURE_WEBAPP_NAME }} # Replace with your app name
publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} # Define secret variable in repository settings as per action documentation
package: '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/app'
The Setup Node.js step ensures that npm is available before the dotnet build command is run. The dotnet build command will trigger the Tailwind build process. Thanks to cross-env the same command will work on a Windows, macOS or Linux machine. I think that's everything!
Original Answer
After reviewing the information in this SO post . Here's a quick rundown of what I ended up implementing. It's not perfect and it needs some work. But it's a good starting point (without making things too complicated).
Created npm Package
I ran npm init in the root of the solution - this created a package.json file. Based on advice I read, this shouldn't be created underneath a project/sub-folder.
In the case of css, this will take a single entry point styles.css (which is underneath a sub-folder/project called "Holly") and process it with PostCSS/Tailwind CSS. CSS is broken into separate files, but handled by postcss-import (more on that below). All CSS is compiled into a single file called holly.css .
Managing Multiple CSS Files
I also have a postcss.config.js file in the root of my solution:
To apply Tailwind to the styles.css file, I ran the following command:
npm run build
It would be nice if I could get Visual Studio to run the above command anytime a file is altered (with a guarantee that it will wait for said compilation when debugging the app) and have Visual Studio show me the errors. But that's another kettle of fish/much more difficult. So I settled on the following workflow. When I'm debugging on my machine, I run this command in an open terminal:
npm run watch
每当一个.css文件发生变化时,就会生成一个新的holly.css文件,这在应用程序运行时可以正常工作--我只需要在做了更改后刷新页面即可。 生产服务器在Docker容器中运行,所以我最终在Dockerfile中调用了npm run production:
# Latest .NET Core from https://hub.docker.com/_/microsoft-dotnet-core-sdk/ (not the nightly one)
FROM mcr.microsoft.com/dotnet/core/sdk:3.0.100-preview9-disco AS build-env
# Setup npm!
RUN apt-get -y update && apt-get install npm -y && apt-get clean
WORKDIR /app
COPY . ./
# To run Tailwind via Webpack/Postcss
RUN npm install
RUN npm run production
RUN dotnet restore "./Holly/Holly.csproj"
RUN dotnet publish "./Holly/Holly.csproj" -c Release -o out
4条答案
按热度按时间cngwdvgl1#
UPDATE 2022
The original answer is still below...
Time has marched on since I originally asked this question. For example, I'm now targeting ES6 on modern browsers without Babel (the main reason why I was using Webpack).
So I thought I might document my current solution (Tailwind cli installed with npm without Webpack)
Assuming you have
npm
installed (part of node.js ). In the root of your project:This will create a
package.json
file. This is what my file looks like:NB - I made the
name
lowercase (the folder/project name is "Holly") - I was looking at the file using VS Code and there was a squiggly line!Next, I install Tailwind:
I've also added
cross-env
- this is so I can run the same command on my dev machine (Windows) and in my GitHub Action.After that, generate the Tailwind config file:
Which should create a file similar to this:
I'm using ASP.NET Core/Blazor Server. So I set the
content
property to the following:Now that Tailwind is configured, we need an input file for generating the css. In my project, I've created a
Styles
folder and a file calledapp.css
:The next step is to create some handy npm scripts. This is what my
package.json
file looks like now:build
will be used by Visual Studio inDEBUG
modewatch
is just handy for on-the-fly updates in dev mode.release
is for productionFinally, add the following to your project file (
Holly.csproj
in my case):This is based on a tutorial I found written by Chris Sainty (which I can't find at the moment). I did, however, find this rather excellent post by Chris on Adding Tailwind CSS v3 to a Blazor app . Though I think this version avoids the integration with Visual Studio.
Make sure you copy and paste the
NpmLastInstall
element and theTarget
elements to their appropriate locations in your.csproj
file.If you're in
DEBUG
mode, Visual Studio will executenpm run build
. If you're inRELEASE
mode, it'll executenpm run release
. If you've just pulled the repo from the server, Visual Studio should be smart enough to automatically executenpm install
. The only thing is, I don't think it'll runnpm install
when thepackage.json
file has been updated - you'll need to remember to do that manually.Targeting
npm
in the.csproj
file means that Tailwind will build when the ASP.NET Core project builds. Things will stay consistent - if you hitF5
you know the css is up-to-date! The Tailwind JIT is on by default - so Tailwind build times are negligible and do not add much to the total build time.One final thing. Because Tailwind css is updated by the Visual Studio project - it means the same thing happens in the cloud. Here's a cut down version of my GitHub Action:
The
Setup Node.js
step ensures thatnpm
is available before thedotnet build
command is run. Thedotnet build
command will trigger the Tailwind build process. Thanks tocross-env
the same command will work on a Windows, macOS or Linux machine.I think that's everything!
Original Answer
After reviewing the information in this SO post . Here's a quick rundown of what I ended up implementing. It's not perfect and it needs some work. But it's a good starting point (without making things too complicated).
Created npm Package
I ran
npm init
in the root of the solution - this created apackage.json
file. Based on advice I read, this shouldn't be created underneath a project/sub-folder.Installed/Configured Webpack
Based on the webpack installation guide , I did the following:
In preparation for my Tailwind setup, I also installed the following (see the
webpack.config.js
file below for more details):And here's my
webpack.config.js
file. Note that it's mainly geared towards processing css with Tailwind:In the case of css, this will take a single entry point
styles.css
(which is underneath a sub-folder/project called "Holly") and process it with PostCSS/Tailwind CSS. CSS is broken into separate files, but handled bypostcss-import
(more on that below). All CSS is compiled into a single file calledholly.css
.Managing Multiple CSS Files
I also have a
postcss.config.js
file in the root of my solution:This configures PostCSS for Tailwind, but also includes
postcss-import
. In the Webpack configstyles.css
is the entry point for processing:As per the Tailwind documentation
postcss-import
module pre-processes the@import
statements before applying Tailwind CSS.Making it Work
Once everything was configured, I added the following scripts to the
npm
package:To apply Tailwind to the
styles.css
file, I ran the following command:It would be nice if I could get Visual Studio to run the above command anytime a file is altered (with a guarantee that it will wait for said compilation when debugging the app) and have Visual Studio show me the errors. But that's another kettle of fish/much more difficult. So I settled on the following workflow.
When I'm debugging on my machine, I run this command in an open terminal:
每当一个.css文件发生变化时,就会生成一个新的
holly.css
文件,这在应用程序运行时可以正常工作--我只需要在做了更改后刷新页面即可。生产服务器在Docker容器中运行,所以我最终在
Dockerfile
中调用了npm run production
:正如您所看到的,构建过程并不像在Visual Studio中点击“开始”按钮那么简单。但是工作流足够简单,团队中的其他成员也可以学习。如果上述工作流出现问题,我将考虑在此时有哪些选择。
接下来我可能会重点讨论删除unused Tailwind CSS
如果有什么不合理的地方或者可以做得更好的地方,请告诉我!
whlutmcx2#
我最近也问过自己同样的问题,我决定不喜欢项目中的package.json或node_modules目录,因此我创建了一个带有新构建操作的NuGet package。
使用这个构建操作,您可以简单地为样式表提供构建操作“TailwindCSS”,在构建过程中,样式表将通过PostCSS进行转换。
欲了解更多详情,您可以看看它的GitHub repo。
4c8rllxm3#
更新以反映Tailwind实验室内的变更:
创建了一个新的独立CLI,允许在无需安装
webpack
或nodejs / npm
的情况下使用CLI。下载
exe
(macOS和linux可用),并在proj目录中运行它,就像运行普通的cli一样。详细信息:https://tailwindcss.com/blog/standalone-cli
krcsximq4#
在提出这个问题的时候,这里给出的答案可能是最好的方法。随着顺风的发展,现在有了替代的方法:
最近我开始使用这种方法,它更容易,而且不需要npm:https://github.com/tesar-tech/BlazorAndTailwind
非常容易的设置和运行的顺风手表在后台工程伟大。